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内 容 简 介 


本 书 打破 传统 学 科 体系 构建 教材 篇 章 的 固有 模式 ,以 项 目 为 载体 ,采用 任务 驱动 的 方式 展开 阐述 ， 
使 读者 可 以 在 项 目 实践 中 学 习 理论 与 技术 ,构建 知识 体系 。 教 材 内 容 由 6 个 项 目 组 成 ,每 个 项 目 根据 开 
发 的 路 线 分 若干 任务 ,项 目 任务 之 后 还 安排 了 “项 目 进 阶 ”和 “课外 实践 ”以 提示 读者 对 项 目 进行 创新 改 
进 , 加 强 自主 学 习 , 拓 展 知识 。 

项 目 1 为 概貌 体验 项 目 ,围绕 一 个 体验 网 站 的 配置 .调试 .部 署 ,介绍 网 页 设计 中 的 开发 环境 及 工 
具 、 网 页 设计 、 调 试 的 过 程 与 方法 、 网 站 发 布 的 操作 步骤 等 ,让 读者 对 网 站 设计 的 相关 技术 有 一 个 感性 的 
认识 ; 项 目 2 到 项 目 6 以 递增 的 方式 逐 介绍 网 站 前 台 设计 的 方法 、 技 术 和 工具 ,使 学 习 者 在 做 中 学 、 学 中 
做 ,循序 渐进 地 掌握 网 页 设计 的 主要 技术 要 点 。 项 目 2 是 一 个 单 页 面 的 个 人 主页 设计 ,指导 读者 学 习 网 
页 中 基本 元 素 的 使 用 方法 和 CSS 格式 化 网 页 元 素 的 方法 ;项 目 3 是 一 个 较为 完整 的 多 页 面 静态 网 站 ,使 
用 Bootstrap 进行 响应 式 网 页 设计 ,页 面 采用 目前 流行 的 扁平 化 风格 ,简洁 大 气 ; 项 目 4 一 项 目 6 都 是 手 
机 网 页 应 用 项 目 , 充 分 体现 了 HTML5 在 移动 应 用 开发 方面 的 优势 ,这 3 个 项 目 将 带领 读者 由 浅 人 深 地 
体验 JavaScript、jQuery、JSON 格式 数据 .HTML5 本 地 存储 等 新 技术 。 

作为 高 职高 专 的 网 页 设计 教材 ,本 书 体系 新 颖 、 层 次 清晰 ,特别 注重 实用 性 和 可 读 性 ,内 容 由 浅 入 
深 ,因而 也 适合 对 网 页 设计 有 兴趣 的 初学 者 、 爱 好 者 作为 自学 参考 书 。 
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为 了 编 好 这 本 教材 ,我 们 编写 团队 重点 研究 了 两 个 问题 :一 是 作为 高 职 
的 “网 页 设计 ”教材 ,应 该 编写 哪些 内 容 ; 二 是 教材 要 以 怎样 的 体例 格式 组 
织 , 才 最 有 利于 读者 ,特别 是 利于 高 职 的 学 生 学 习 相关 技术 。 

对 于 第 一 个 问题 ,答案 很 明确 ,应 该 是 当前 乃至 将 来 一 段 时 间 内 最 新 的 
Web 前 端 开发 技术 ! HTML5 和 CSS3 代表 了 下 一 代 的 HTML 和 CSS 技 
术 , 它 们 必 将 推动 互联 网 的 快速 发 展 。 无论 是 移动 开发 ,还 是 云 计算 ， 
HTML5 都 担负 着 不 可 蔡 代 的 使 命 , 它 已 经 延伸 到 各 个 应 用 领域 。 由 此 ,网 
页 设计 或 者 网 站 前 台 设计 的 教材 必然 从 旧 标 准 过 滤 到 HTML5 十 CSS3。 本 
书 选取 的 都 是 目前 主流 的 新 技术 ,并 充分 考虑 到 了 实用 性 的 要 求 。 

第 二 个 问题 的 答案 似乎 不 那么 显而易见 。 对 于 大 多 数 读者 来 说 ,学 习 
新 技术 是 一 件 并 不 轻松 甚至 有 些 痛 苦 的 经 历 , 当 我 们 学 习 了 编程 语法 、 数 据 
类 型 .表达 式 等 , 熟 记 了 那么 多 的 标记 、 规 则 , 却 见 不 到 一 点 儿 成 果 时 ,就 像 
一 个 在 沙漠 中 独自 跋涉 了 许久 的 人 看 不 到 任何 路 标 一 般 , 我 们 会 疲倦 、 懈 
总, 甚至 放弃 。 因 此 ,成 功 只 属于 有 着 强大 的 内 驱 力 和 意志 力 的 人 。 那 么 ， 
是 不 是 可 以 让 学 习 变 得 比较 轻松 ,就 好 像 长 跑 途中 不 断 有 人 告诉 你 已 经 跑 
过 了 多 少 路 程 ,还 有 多 少 距离 ,让 坚持 变 得 不 那么 艰难 ? 这 就 是 本 书 打破 传 
统 学 科 体系 的 教材 编写 模式 ,采用 以 项 目 为 载体 的 方式 ,分 解 、 重 构 知 识 体 
系 的 原因 所 在 ! 全 书 选取 了 6 个 项 目 . 以 任务 驱动 的 方式 对 章节 排序 ,体现 
行为 导向 的 教学 理念 。 

读者 学 习 了 第 一 个 项 目 后 会 发 现 ,“ 网 站 ”原来 是 这 么 来 的 ! 整体 的 面 
貌 看 到 了 ,就 会 有 进一步 深入 学 习 的 愿望 。 第 二 个 项 目 完成 后 ,一 个 完整 的 
个 人 主页 展现 出 来 ,也 许 读者 会 兴奋 地 说 :“ 瞧 ,本 人 的 网 页 大 功 告 成 ! 简洁 
但 不 简陋 哦 1" 第 三 个 项 目 完成 当然 要 花 比较 多 的 工夫 ,读者 心里 一 定 有 底 
了 ,网 站 其 实 就 那么 回 事 ! 好 吧 , 接 下 去 可 以 高 深 些 了 ,手机 网 页 如 何 ? 最 
后 再 来 一 个 综合 的 一 一 打 地 鼠 游 戏 , 其 实 没 那 么 难 ! 当 读 者 能 够 不 断 地 欣 
赏 到 自己 的 学 习 成 果 时 ,学 习 技 术 就 会 变 成 “我 想 知 道 ”, 而 不 是 “我 不 得 不 
Ea 

本 教材 是 不 是 会 受 读者 欢迎 呢 ? 我 们 真 的 不 敢 保证 ,但 我 们 能 保证 的 
是 ,我 们 在 探索 高 职 的 项 目 化 教学 方面 的 确 努力 了 好 几 年 ,也 的 确 有 了 一 些 
自己 的 体会 和 经 验 ,现在 用 这 本 书 呈现 出 一 点 成 果 , 希 望 为 读者 提供 一 些 学 
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习 上 的 帮助 ,也 求教 于 广大 同仁 。 

学 习 本 教材 建议 安排 的 总 学 时 为 80 学 时 ,作者 根据 教学 经 验 给 出 了 一 个 大 概 的 学 时 
分 配 计 划 , 供 广大 教师 或 学 生 参考 :项目 1 一 一 10 学 时 ;项 目 2 一 一 10 学 时 ;项 目 3 一 一 18 
学 时 ;项 目 4 14 学 时 ;项 目 5 一 一 12 学 时 ;项 目 6 一 一 16 学 时 ;合计 一 一 80 学 时 。 

本 书 由 李 琳 、 冯 益 斌 老师 主编 ,由 教材 团队 完成 编写 工作 。 在 编写 过 程 中 得 到 许多 专 
家 ,同事 和 企业 同仁 的 帮助 ,此 处 要 特别 感谢 马 永山 、 耿 亚 、 车 金 庆 、 严 正 宇 、 李 军 等 。 

在 编写 过 程 中 ,我 们 力求 科学 .严谨 ,但 由 于 精力 人力 有 限 , 朴 漏 之 处 在 所 难免 , 敬 请 
广大 读者 批评 指正 。 
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2015 年 12 月 


项 目 1 


| 
2 


1 
Wy 
1.8 


籽 宙 体 验 基 日 拉 识 了 网 疤 aibi 


ONISHIS 


= 


搭建 开发 环境 ， 
12.1 工作 任务 < 
1.2.2 技术 理论 . 
A 
1.2.4 ”知识 拓展 ee 
这 秽 同 站 三 贱 员 2 
a 
1.3.4 ”知识 拓展 
1.4.1 工作 任务 站 
人 


[2 


oo 品 


oO 


ee 24 


技术 要 点 … 
项 目 进 阶 … 
课外 实践 ee 


项 目 2 入 门 项 目 : 个 人 主页 网 站 设计 ee 25 


| 
2.2 


项 目 介 细 eee 25 
知识 准备 … 25 
i 全 
2:2. 2 HTMES msm 30 
. 癌 央 入 周 


Co [HTML5+c553 网 站 前 台 设 计 项 目 化 部 误 | 


7 TN 
导航 模块 …… .. 

个 人 简介 模块 
个 人 履历 模块 
作品 集 模块:… 69 
.12 课外 实践 74 


项 目 3 进 阶 项 目 : 教育 门户 网 站 前 台 设 计 75 


NY 
CoN 人 mw 


-| ”Bootstrap 样式 框架 5 
3.2.2 JavaScript 基础 2 
ce bs RE RARRRREERRRRRESE 0 二 03 全 罗 
3.3.1 网 站 设计 需求 站 92 
3.3.3 网 站 结构 布局 ee 92 


1 标题 区 二 设计 0 
.3 Es ee 
.4 ”图 文 区 域 1 设计 . Pp Pe senu ssidUase 首 疝 司 
5 图 文 区 域 2 设计 . Pp Edaas 靖 从 舍 
6 ss 和 
人 5 pe 

3.5.1 标题 区 域 设计 … 117 

3.5.2 图 文 区 域 设计 117 
i 


Ww 人 ww 
人 


116 


3.9 


项 目 4 


4.1 
4.2 


人 
OI 人 w 


项 目 5 


PR 
5S 


6 
项 目 进 阶 eee 
地 


提高 项 目 : 移动 新 闻 网 站 前 台 设计 ee 


= 
bt PE 


4.2.1 JSON 数据 格式 


4.2.2 JQuery 基础 


4.2.3 AJAX 


辐 站 六 划 与 没 秆 让 we 


新 闻 首页 ………… 
新 闻 列 表 模 块 … 
新 闻 阅 读 模块 … 


渐 自 允 队 人 
ee 


自主 项 目 : 个 人 记 账 助手 设计 


p= D1: fT EP 


知识 准备 … 


网 站 规划 与 设计 ……… 


5.3.1 账目 登记 表单 设计 ， 
5.3.2 账目 记录 列表 设计 … 


69.3 用户 燥 作 流程 设计 ocean Dorit 
1 TT 
a 
系 先 外 罗 守 现 


5.5.1 初始 化 处 理 …… 
5.5.2 新 增 或 修改 消费 记录 - 
5.5.3 删除 消费 记录 … 


5.5.4 清 室 消 费 记录 
5.5.5 ”用户 体验 改进 rn 
湖上 月 指 及 全 丽人 仆人 和 全 和 仆 的 
和 


170 


175 


175 
177 


项 目 6 综合 项 目 : 打 地 鼠 藩 戏 设计 ee 187 


6.1 项 目 介绍 ee 187 
6.2 系统 功能 分 析 … 
6.3 ”设计 用 户 界面 ……… 
殴 击 国 数 

开始 按钮 处 理事 件 - 
结束 按钮 处 理事 件 - 


om mom 
心心 心心 必 必 心 
oo 中 思 上 mo 


oT 


知识 目标 : 

。 掌握 Windows 环境 下 IIS 的 安装 方法 与 步骤 
。 掌握 使 用 IIS 发 布 网 站 的 操作 步骤 

。 认识 网 站 的 概念 、 组 成 、 分 类 以 及 网 站 建设 的 基本 步骤 
。 认识 网 页 及 其 中 的 各 种 基本 元 素 

。 了 解 设 计 网 页 的 常用 工具 

能 力 目标 : 

。 能 安装 IIS 并 进行 简单 配置 

。 能 使 用 IIS 发 布 网 站 

。 能 安装 并 使 用 至 少 一 种 网 页 编辑 软件 

。 能 安装 并 使 用 至 少 一 种 浏览 器 


1.1 项 目 介绍 


本 项 目的 目标 是 发 布 并 测试 一 个 现 有 的 网 站 (该 网 站 为 本 书 项 目 2 设计 的 个 人 主 
页 的 最 终 网 站 )。 本 项 目 又 分 为 以 下 4 部 分 : 搭建 开发 环境 ,主要 是 安装 和 启动 
Internet 信息 服务 (IIS); @ 通 过 浏览 器 来 查看 网 页 及 网 页 的 源 代码 ,认识 网 页 的 本 质 及 
网 页 的 组 成 元 素 ; @@ 对 网 页 做 一 些 简 单 的 修改 和 调试 ,体验 网 页 编辑 和 调试 软件 的 应 
用 ; @ 把 本 机 作为 Web 服务 器 ,发 布 网 站 ,并 采用 本 机 和 远程 计算 机 两 种 方式 访问 该 
网 站 。 


1.2 搭建 开发 环境 


121 工作 任务 


。 在 Windows 7 的 环境 中 ,安装 Internet 信息 服务 (IIS) 
。 启动 .停止 Internet 信息 服务 (IIS) 
。 认识 并 准备 网 页 设计 软件 、 网 页 调试 软件 
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122 技术 理论 


网 页 是 构成 网 站 的 基本 元 素 , 是 承载 各 种 网 站 应 用 的 平台 。 通 俗 地 说 ,网 站 是 由 网 页 
组 成 的 。 网 页 实际 是 一 个 文本 文件 ,用 Windows 自 带 的 记事 本 工具 就 可 以 打开 和 编辑 。 
它 一 般 存 放 在 网 络 上 的 某 台 服务 器 (Server) 中 。 当 用 户 在 浏览 器 (Brower) 输 入 网 址 
(URL) 以 后 ,服务 器 会 响应 这 个 请 求 , 同 时 将 网 页 文件 准备 好 ,并 通过 网 络 送 到 访问 者 的 
计算 机 。 浏 览 器 接收 到 网 页 后 ,解析 网 页 的 内 容 并 显示 ,如 图 1-1 所 示 。 


0 eb 
向 Web 服 务 器 发 送 页 面 请 
(一 ©! 字 改 太 内 用 胡 


一 


| 服务 器 响应 以 超 文本 的 格式 发 送 回 Web 页 面 


Web 服 务 器 
图 1-1 网 页 请 求 示意 图 


访问 网 页 的 过 程 归 纳 为 : 浏览 器 (Brower) 发 出 请 求 , 服 务 器 (Server) 响 应 ,并 将 网 页 
发 送 给 浏览 器 (Brower) 。 这 种 模式 称 为 B/S 模式 。 在 本 书 中 ,将 Windows 7 环境 中 的 
Internet 信息 服务 作为 服务 器 端 软件 。 

Internet 信息 服务 (Internet Information Services,IIS) 可 以 在 互联 网 或 局 域 网 上 发 布 
网 页 信息 ,并 提供 很 多 管理 网 站 和 Web 服务 器 的 功能 。Windows 7 操作 系统 集成 了 IIS 
(版 本 号 是 7.5) ,默认 没有 安装 ,通过 执行 菜单 命令 “控制 面板 ”一 “程序 和 功能 ”一 >“ 打 
开 或 关闭 Windows 功能 ”来 安装 。 


123 任务 实施 


1. 在 Windows 7 环境 中 安装 Internet 信息 服务 (IIS) 


(1) 单 击 “开始 ”控制 面板 ”, 再 单 击 “ 程 序 ”。 

(2) 在 “程序 和 功能 ?下 面 , 单 击 “ 打 开 或 关闭 Windows” 功 能 。 

(3) 进入 Windows 功能 窗口 (如 图 1-2 所 示 ) ,可 以 看 到 Internet 信息 服务 选项 ,按照 
图 中 所 示 完 成 设置 。 

(4) 单 击 “ 确 定 ” 按 钮 ,进入 系统 安装 设置 。 此 时 可 能 需要 等 待 两 三 分 钟 。 

(5) 安装 成 功 后 ,窗口 消失 , 回 到 控制 面板 ,选择 “系统 和 安全 ”。 

(6) 进入 “系统 和 安全 ”窗口 ,选择 左下 角 的 “管理 工具 ”。 

(7) 进入 “管理 工具 ”窗口 ,可 以 看 到 “Internet 信息 服务 ”, 如 图 1-3 所 示 。 


| 打开 或 关闭 ee 功能 


贺卡 Internet Explorer 10 
回 朋 Internet Information Services 可 入 载 的 Web 核心 
日 贺 朋 Internet 信息 服务 
田 回国 FTP 服务 器 
日 国电 Web 管理 T 具 
田 国 服 ns 6 管理 兼容 性 
国电 TS 管理 服务 
国 晶 TS 管理 部 本 和 工具 
用 ns 管理 控制 台 
日 国 是 万维网 服务 
田 国 用 安全 性 
回国 最 常见 HTTP 功能 
田 贺电 性 能 功能 
田 贺 虹 应 用 程序 开发 功能 
田 圆 胸 
国 量 Microsoft .NET Framework 3.5.1 
回电 Microsoft Message Queue (MSMQ) 服务 器 
田 加盟 NFS 服务 
回 朋 RiP 俩 听 器 


| mrecmn 人 国 


KG 16 个 对 象 


图 1-3 控制 面板 中 的 管理 工具 
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2. 启动 ,停止 Internet 信息 服务 (IIS) 


(1) 打开 控制 面板 ,选中 “管理 工具 ”。 

(2) 在 管理 工具 中 找到 “服务 ”, 双 击 打 开 。 

(3) 在 “服务 "里面 找 到 “World Wide Web Publishing Service”, 可 以 选择 “启动 "“ 停 
止 ”“ 暂 停 ”或 “重启 ”, 如 图 1-4 所 示 。 


显示 名 称 Yorla Wide Web Publishing Service 
指 述 器 mt 信息 服务 管理 器 提供 Web 连接 
可 执行 文件 的 路 径 
中 C:\Windows\systen32\svehost. exe -k iissves 
启动 类 型 FE): ”| 自动 耻 
服务 状态 已 启动 
启动 5) | 区 扩 上 sa] | 暂停 C) | [| 恢复 8) | 
当 从 此 处 启动 服务 时 ， 您 可 指定 所 适用 的 启动 参数 。 
启动 荔 数 0) | | 
J 
CC 本 [RW 
\- = 


图 1-4 WWW 服务 控制 
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网 页 浏览 器 引擎 俗称 浏览 器 内 核 , 又 叫 排版 引擎 (layout engine) 或 者 泻 染 引擎 
(rendering engine)。 它 负责 取得 网 页 的 内 容 (HTML、XML ,图像 )、 整 理 信 息 (CSS) ,以 
及 计算 网 页 的 显示 方式 ,然后 输出 。 

浏览 器 种 类 如 果 按 品牌 商 来 分 , 少 说 也 有 上 千 种 ,所 以 一 般 情况 下 ,浏览 器 都 是 根据 
核心 区 分 的 。 下 面 介 绍 几 个 主流 浏览 器 的 内 核 信息 ,如 表 1-1 所 示 。 


表 1-1 浏览 器 内 核 信 息 


浏览 器 名 称 所 属 公 司 内 核 信息 

Chrome Google Blink 

Internet Explorer Microsoft Spyglass Trident 

Mozilla Firefox Mozilla 基金 会 Gecko 

Opera Opera Software Webkit 

Safari 苹果 公司 Webkit 
Maxthon 邀 游 天 下 科技 有 限 公司 WebKit Trident 
腾讯 TT 浏览 器 腾讯 控股 有 限 公 司 Trident 
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续 表 
浏览 器 名 称 所 属 公司 内 核 信 息 
搜狗 高 速 浏览 器 搜狗 Trident WebKit 
360 安全 浏览 器 奇 虎 360 Trident Blink 
360 极速 浏览 器 奇 虎 360 Trident Blink 
猎豹 安全 浏览 器 金山 网 络 科技 有 限 公司 Trident Blink 


可 以 看 出 ,目前 主流 的 浏览 器 中 ,以 Trident、Blink 和 WebKit 这 3 种 内 核 为 主 ,其 典 
型 代表 分 别 为 .Chrome 和 Safari。 随 着 微软 公司 最 新 的 Windows 10 操作 系统 发 布 ， 
一 个 名 为 “Spartan? 的 新 的 浏览 器 内 核 随 之 发 布 .并 代替 IE 作为 默认 浏览 器 。 相 信 在 不 
久 的 将 来 , 它 会 取代 IE 的 地 位 。 


1.3 认识 网 站 与 网 页 
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。 认识 网 页 中 的 各 种 基本 元 素 
。 查看 网 页 源 代码 ,理解 网 页 的 本 质 


132 技术 理论 
1. 网 站 


1) 网 站 的 概念 

网 站 (Website) 是 指 在 因特网 (Internet) 上 ,根据 一 定 的 规则 ,使 用 HTML 等 工具 制 
作 的 用 于 展示 特定 内 容 的 相关 网 页 的 集合 。 简 单 地 说 ,网 站 是 一 种 通信 工具 ,就 像 布告 栏 
一 样 ,人 们 可 以 通过 网 站 来 发 布 想 要 公开 的 资讯 ,或 者 利用 网 站 提供 相关 的 网 络 服务 。 人 
们 可 以 通过 网 页 浏览 器 访问 网 站 ,获取 需要 的 资讯 或 者 享受 网 络 服务 。 

许多 公司 都 拥有 自己 的 网 站 ,他 们 利用 网 站 进行 宣传 .发 布 产 品 资讯 及 开展 招聘 等 。 
随 着 网 页 制作 技术 的 流行 ,很 多 个 人 开始 制作 个 人 主页 ,用 于 自我 介绍 ,展现 个 性 。 也 有 
以 提供 网 络 资讯 为 一 利 手 段 的 网 络 公司 ,通常 这 些 公司 的 网 站 提供 人 们 生活 各 个 方面 的 
资讯 ,如 时 事 新 闻 、 旅 游 . 娱 乐 ,经 济 等 。 

在 因特网 发 展 的 初期 ,网 站 只 能 保存 单纯 的 文本 。 经 过 几 年 的 发 展 , 当 万 维 网 出 现 之 
后 ,图 像 . 声 音 动画 、 视 频 , 甚 至 3D 技术 开始 在 因特网 上 流行 ,网 站 慢 慢 地 发 展 成 我 们 现 
在 看 到 的 图 文 并 茂 的 样子 。 通 过 动态 网 页 技术 ,用 户 可 以 与 其 他 用 户 或 者 网 站 管理 者 交 
流 , 有 一 些 网 站 提供 电子 邮件 服务 。 

2) 网 站 的 组 成 结构 

在 早期 ,域名 、 空 间 服务 器 与 程序 是 网 站 的 基本 组 成 部 分 。 随 着 科技 进步 ,网 站 的 组 
成 日 趋 复杂 ,多 数 网 站 由 域名 、 空 间 服务 器 .DNS 域名 解析 、 网 站 程序 数据 库 等 组 成 。 

(1) 域名 (Domain Name): 是 由 一 串 用 点 分 隔 的 字母 组 成 的 Internet 上 某 一 台 计 算 
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机 或 计算 机 组 的 名 称 , 用 于 在 数据 传输 时 标识 计算 机 的 电子 方位 (有 时 也 指 地 理 位 置 )。 
域名 已 经 成 为 互联 网 的 品牌 、 网 上 商标 保护 必 备 的 产品 之 一 。 

DNS 规定 ,域名 中 的 标号 都 由 英文 字母 和 数字 组 成 。 每 一 个 标号 不 超过 63 个 字符 ， 
也 不 区 分 大 小 写字 母 。 标 号 中 除 连 字符 (-) 外 ,不 能 使 用 其 他 标点 符号 。 级 别 最 低 的 域名 
写 在 最 左边 ,级 别 最 高 的 域名 写 在 最 右边 。 

(2) 空间 : 常见 网 站 空间 包括 虚拟 主机 、 虚 拟 空间 、 独 立 服 务 器 、 云 主机 及 VPS。 

虚拟 主机 是 在 网 络 服务 器 上 划分 出 一 定 的 磁盘 空间 供用 户 放 置 站 点 .应 用 组 件 等 ; 
提供 必要 的 站 点 功能 .数据 存放 和 传输 功能 。 所 谓 虚拟 主机 ,也 叫 * 网 站 空间 ”, 就 是 把 一 
台 运 行 在 互联 网 上 的 服务 器 划分 成 多 个 “虚拟 ”的 服务 器 。 每 一 台 虚 拟 主机 都 具有 独立 的 
域名 和 完整 的 Internet 服务 器 (支持 WWW、FTP、E-mail 等 ) 功 能 。 虚 拟 主 机 是 网 络 发 展 
的 福音 , 极 大 地 促进 了 网 络 技术 的 应 用 和 普及 。 同 时 ,虚拟 主机 的 租用 服务 成 为 网 络 时 代 
新 的 经 济 形式 。 虚 拟 主机 的 租用 类 似 于 房屋 租用 。 

(3) 程序 : 即 建 设 与 修改 网 站 所 使 用 的 编程 语言 (常见 的 有 Java、PHP、asp. net)。 通 
过 这 些 语言 ,可 以 响应 网 站 浏览 者 的 请 求 和 操作 ,并 将 结果 生成 HTML ,传输 到 浏览 者 的 
浏览 器 中 。 


2. 建立 一 个 网 站 的 基本 步骤 


(1) 购买 域名 与 空间 (万 网 .新 网 都 可 以 购买 ) 。 

(2) 空间 与 域名 做 备案 (如 不 明白 具体 操作 ,拨打 空间 服务 商 的 售后 电话 ) 。 

(3) 制作 网 站 ,并 上 传 到 空间 (网 站 上 传 可 以 使 用 FTP 工具 ) 。 

(4) 备案 完成 后 ,解析 、 绑 定 域名 到 空间 (登录 购买 域名 和 空间 的 服务 商 网 站 进 
行 操作 )。 

(5) 网 站 可 以 正常 访问 。 

3. 网 页 及 其 基本 元 素 


如 前 所 述 ,网 页 其 实 就 是 一 个 文本 文件 。 与 普通 文本 相 比 ,网 页 不 但 可 以 显示 基本 的 
文字 ,还 可 以 显示 图 片 、 视 频 等 多 媒体 信息 。 通 常情 况 下 ,网 页 包含 如 下 基本 元 素 
(如 图 1-5 所 示 )。 


首页 互联 网 | 。 移动 。 电 商 。 社交 
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图 1-5 网 页 中 的 基本 元 素 
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(1) 文字 : 网 页 内 容 的 基本 表示 。 

(2) 图 片 : 常用 于 网 页 的 图 片 格式 有 JPG、GIF、PNG。 

(3) 动画 : 常见 的 格式 为 Gif 动画 、Flash 动画 和 HTML5 动画 。 

(4) 声音 : 网 页 上 几乎 所 有 的 音频 格式 都 是 MP3 。 

(5) 视频 : 常见 格式 为 FLV、MP4。 

(6) 超 链接 : 由 一 个 网 页 跳 转 到 另 一 个 目的 (网 页 、 图 片 .文件 等 ) 的 链接 。 
(7) 表格 : 文本 的 一 种 组 织 形式 ,也 可 用 于 网 页 元 素 布局 。 

(8) 表单 : 用 于 采集 用 户 输入 的 数据 ,接受 用 户 请 求 。 


4. 网 页 设计 软件 


1) 文本 编辑 器 

理论 上 讲 , 只 要 能 够 编辑 文本 文件 的 软件 ,就 可 以 设计 网 页 。 这 类 软件 比较 小 巧 ,能 
很 方便 地 设计 或 修改 网 页 ,适用 于 临时 修改 网 页 的 场合 。 

常见 软件 如 下 所 述 。 

(1) Notepad: Windows 自 带 的 记事 本 程序 , 它 只 具备 最 基本 的 编辑 功能 ,所 以 体积 
小 巧 ,启动 快 ,占用 内 存 低 ,容易 使 用 。 

(2) Notepad 十 十 : 它 的 功能 比 Notepad 强大 ,软件 界面 如 图 1-6 所 示 ,除了 用 来 制作 
一 般 的 纯 文字 文件 ,也 适合 当 作 编 写 计算 机 程序 的 编辑 器 。Notepad 十 十 不 仅 有 语法 高 
亮度 显示 ,也 有 语法 折 笃 功能 ,并 且 支 持 宏 , 以 及 扩充 基本 功能 的 外 挂 模 组 。 
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Fle Edit Search View Encoding Language Setings Macro Run Window ? Ca 

5 锯 目 四 oo 全 | 者 隐语 | C1 的 知 |**| 思 加 | 志 1 国 中国 且 | 回 国 田 加 二 
en 0 

| 1 YPE html 

| 2 bed 
3 Bhead> 
4 <meta charser="utf-8" /> 
5s <title>HelloWorld</title> 
6 
于 <!-— WinJS references 一 > 
8 <link href="//Microsoftt.WinIS.2.0/css/ai-dark.css” rel="stylesheet" /> 
3 <script src="//Microsoft.Wings.2.0/js/base.js"></script> 
10 <script src="//Microsoft.WinJS.2.0/js/ai.js"></scripc> 
11 
12 <!-— HelloWorld references 一 -> 
13 <link href="/css/default.css" rel="stylesheet" /> 
14 <acript src="/js/default.js"></script> 
15 </head> 
16 日 <body> 
17 <p>Content goes herec/P> 
18 F</body> 
19 </heml> 

Hyper length: 525 lines:19 tn:19 Col:8 Sel:010 Dos\Windows UTF-8w/oBOM INS 


图 1-6 Notepad 十 十 软件 界面 
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(3) UltraEdit: 一 套 功 能 强大 的 文本 编辑 器 ,如 图 1-7 所 示 , 可 以 编辑 文本 ,十 六 进 制 
数 及 ASCII 码 ,完全 可 以 取代 记事 本 。 该 编辑 器 内 建英 文 单词 检查 、 语 法 高 亮度 显示 ,可 


同时 编辑 多 个 文件 ; 而 且 即 使 开启 很 大 的 文件 ,速度 也 不 会 慢 。 
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DOS 936 (ANSI/OEM - 简体 中 文 GBK) | 不 用 三 法 4 三 ”| > | 候 改 ; 2014/6/28 23:08:16 | 文件- 


图 1-7 UltraEdit 软件 界面 


(4) EditPlus: 一 套 功能 强大 ,可 取代 记事 本 的 文字 编辑 器 ,如 图 1-8 所 示 ,拥有 无 限 


文件 W) 编 编 (8) “显示 D0 “搜索 {S) “文档 (D)” 方 宾 (D 工具 (G) 浏览 器 (L) Zen Coding 宣 口 (K) 竹 助 


EJ A A 外 本 守 | 居心 此 于 
3@|B TUA 订 | 由。 机 | 国 市 二 了 可 | 可 司 襄 必 


---+----1----+----2----+----3----+----4-- 生 + 


本国 四 加 | 他 | 
rsP| 避 二 党 | 回 困 | 因 右 | 


-+ 一 一 6----+----7----+- 


1 <!IDOCTYPE html> 


2 <html> 
3 <head> 
4 <meta charset="utf-8" /> 
5 <title>HelloWorld</title> 
6 
7 <1-- Win]S references --> 
8 <link href="//Microsoft .win]S.2.8/css/ui-dark.css”rel="stylesheet”/> 
9 <script src="//Microsoft-Min]S.2-8/js/base-js"></script> 
10 <script src="//Microsoft.Win]S.2.0/js/ui.js"></script> 
11 
12 <!1-- HelloWorld references --> 
13 <link href="/css/default.css" rel="stylesheet" /> 
p14 <script src="/js/default.js"></script> 
15 </head> 
16 <body> 
17 <p>Content goes here</p> 
18 </body> 
19 </html> 
加 回 
| Nonamel 
| 如 雪 帮 助 ,请 按键 盘 F1 刍 行 14 列 43 19 00 PC UTF-8 


EditPlus 软件 界面 
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制 的 撤销 与 重 做 、 英 文 拼 字 检 查 自动 换行 , 列 数 标记 、 搜 寻 取代 、 同 时 编辑 多 文件 及 全 屏 
幕 浏 览 功 能 。 它 是 一 个 非常 好 用 的 HTML 编辑 器 ,除了 支持 颜色 标记 、.HTML 标记 ,还 
支持 CC++ Perl Java。 另 外 , 它 有 完整 的 HTML &. CSS 指令 功能 。 

(5) Sublime Text: 一 种 代码 编辑 器 (Sublime Text 2 是 收费 软件 ,但 可 以 无 限期 试 
用 ) ,如 图 1-9 所 示 , 具 有 漂亮 的 用 户 界面 和 强大 的 功能 ,例如 代码 缩 略图 .Python 插件 、 
代码 段 功能 等 ,如 图 1-9 所 示 ; 还 可 以 自 定义 键 绑 定 .菜单 和 工具 栏 ,其 主要 功能 包括 拼 
写 检查 ,书签 .完整 的 Python API、Goto 功能 .即时 项 目 切换 .多 选择 多 窗口 等 。 它 是 一 
个 跨 平台 的 编辑 器 ,同时 支持 Windows、Linux、Mac OS X 等 操作 系统 。 


国 untitled «= Sublime 
Fie Edit Selecion Find View Goto Tools Project Preferences Help 


untitled . 
<1DOCTYPE htmL> 是 
<html> 一 
<head> 


<meta charset="utf-8" /> 
<title>HelloWorld< /title> 


<1-- MinIS references --> 
| <link href="//Microsoft.Win]S.2.8/css/ui-dark.css” rel=" 
stylesheet” /> 


<script src="//Microsoft.Win]S.2.6/js/base.js"></script> 
9 <script src="//Microsoft.Win]S.2.8/js/ui.js"></script> 


1 
1 
1 ¢!1-- HeLLowortd references --> 

1 <link href="/css/default.css” rel="stylesheet” /> 
14 <script src="/js/default.js"></script> 

15 </head> 

16 <body> 
1 <p>Content goes here</p> 
18 «</body> 

9 </html> 


1-9 Sublime Text 软件 界面 


2) 集成 开发 环境 

集成 开发 环境 (Integrated Development Environment,IDE) 是 用 于 提供 程序 开发 环 
境 的 应 用 程序 ,一般 包 括 代码 编辑 器 ,编译 器 、 调 试 器 和 图 形 用 户 界面 工具 。 它 是 集成 了 
代码 编写 功能 、 分 析 功 能 、 编 译 功能 .调试 功能 等 的 一 体 化 开发 软件 套件 。 常 见 的 网 页 设 
计 IDE 如 下 所 述 。 
(1) Adobe Dreamweaver ,简称 DW, 中 文 名 称 “ 梦 想 编织 者 ”, 是 集 网 页 制作 和 网 站 管 
理 于 一 身 的 “所 见 即 所 得 ”网 页 编辑 器 ,如 图 1-10 所 示 。DW 是 第 一 套 针 对 专业 网 页 设计 
师 的 视觉 化 网 页 开发 工具 ,利用 它 可 以 轻而易举 地 制作 跨越 平台 限制 和 跨越 浏览 器 限制 
的 充满 动感 的 网 页 。 
(2) Microsoft Visual Studio, 简称 VS, 是 微软 公司 的 开发 工具 包 系 列 产品 , 如 
图 1-11 所 示 。VS 是 一 个 基本 完整 的 开发 工具 集 , 包 括 整个 软件 生命 周期 中 所 需要 的 大 
部 分 工具 ,如 UML 工具 ,代码 管控 工具 、 集 成 开发 环境 (IDE) 等 。 


HTMLS+CSS3 网 站 前 台 设 计 项 目 化 教程 


<!DOCTYPE hrml> 

<hrml> 

<head> 
<mera charset="urf-g" /> 
<rtitle>HelloWorld<c/title> 


<I-- Wings references 一 > 

<link href="//Microsoft .NinJs.2.0/css/ui-dar) rel="stylesheet" /> 
<script src="//Microsoft.Nings.2.0/js/base.js"></script> 

<script src="//Microsoft.WingS.2.0/js/ui.js"></script> 


<!-— HelloWorld references 
<link href="/css/default.css" rel="stylesheet" /> 
<acript src="/js/default.js"></script> 

</head> 

<body> 
<p>Content goes here</p> 

‘</body> 

</hrml> 


图 1-10 ”Dreamweaver 软件 界面 


0 HTMLPagel.htmi" - Microsoft Visual Studio(Sa) V7 DO Wean (ct: P=- Ox 
交 册 机 BV) 项 (P) WD) EMM) IAM Nts) SWN) OW Wm 和 
-名 国 呈 了 -SR 可 -| 了 在。 

4 meta charset="utf-8” /> 

5 <title?HelloWorldK/titley 

6 

7 C1— WnJS references 一 

8| <link href="//Microsoft. Win]S. 2.0/css/ui-dark, css” rel="stylesheet” /> 

9 《script src="//Nicrosoft. Mn]S, 2.0/js/base. js”>C/script> 

10| 《script sr /Nicrosoft. Win]JS. 2. 0/js/ui. js“></script》 

11 

12 C1— 了 lldorld zeferences 一 

13| <link href="/css/default. css” rel="stylesheet” /> 

14 script src="/js/default. js”>C/script> 

15| | cheady 

16|5 cbeay> 

17 <p>Content goes hereC/p> 

18| | /body> 

19 [</html> 
0 % -| 4 » 

吉方 到 江天 芝 理 委 慑 务 器 训 天 和 寻 基 向 


图 1-11 Visual Studio 软件 界面 


5. 网 页 调试 工具 
网 页 最 终 是 在 浏览 器 上 运行 ， 


此 ,网 页 调试 工具 与 浏览 器 集成 在 一 起 。 常 见 的 网 页 


(GOL A 项 目 1 概貌 体验 项 目 : 初 识 网 站 | 


调试 工具 如 下 所 述 。 

(1) Internet Explorer 11 十 F12: Internet Explorer 11 带 有 一 组 内 置 的 开发 人 员工 
具 , 帮 助 开 发 人 员 跨 多 种 设备 来 构建 .诊断 和 优化 现代 网 站 和 应 用 。 由 于 这 些 工 具 是 通过 
按 F12 键 启动 的 ,所 以 将 这 一 组 全 新 工具 简称 为 F12。 这 些 工具 可 帮助 Web 开发 人 员 快 
速 ,高效 地 完成 各 项 工作 ,如 图 1-12 所 示 。 


后 
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html5 百度 百科 
| HTML 万 维 网 的 核心 语 高 、 标 准 通用 标记 语言 下 的 一 个 应 用 超 文本 标记 语言 国 
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HIMLAT 
在 w3school, 您 不 需要 任何 工具 就 可 以 学 习 HTML 。 您 不 需要 任何 HTML 编辑 器 您 不 需要 we 


< 


着 下 HTML.. 
样式 跟踪 样 式 布局 尾 性 


图 1-12 IE 调试 界面 


(2) Google Chrome 十 F12: 只 要 安装 了 谷歌 浏览 器 ,就 可 以 使 用 Google Chrome 开 
发 者 工具 ,如 图 1-13 所 示 。 它 是 内 嵌 到 浏览 器 的 开发 工具 ,打开 方式 有 两 种 , 即 按 F12 键 
或 按 Shift 十 Ctrl 十 i 键 。 

(3) Firefox 十 Firebug: Firebug 是 Firefox 下 的 一 款 开 发 类 插件 , 现 属于 Firefox 的 
五 星 级 强力 推荐 插件 之 一 。 它 集 HTML 查看 和 编辑 、JavaScript 控制 台 、 网 络 状况 监视 
器 于 一 体 ,是 开发 JavaScript、CSS、HTML 和 AJAX 的 得 力 助 手 。Firebug 如 同一 把 精巧 
的 瑞士 军刀 ,从 各 个 不 同 的 角度 剖析 Web 页 面 内 部 的 细节 层面 ,给 Web 开发 者 带 来 很 大 
的 便利 ,如 图 1-14 所 示 。 


6. 图 像 处 理工 具 


1) Adobe Photoshop 
Adobe Photoshop 简称 PS, 是 由 Adobe Systems 公司 开发 和 发 行 的 图 像 处 理 软件 ， 
如 图 1-15 所 示 。 


html5 百度 百科 
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C Recommendation 、 见 本 处 关 考 资料 原文 内 容 : ) 20 
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1-14 ”Firefox 十 Firebug 调试 界面 
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图 1-15 Adobe Photoshop 启动 界面 


Photoshop 主要 处 理 以 像素 构成 的 数字 图 像 。 使 用 其 众多 的 编 修 与 绘图 工具 ,可 以 有 效 
地 完成 图 片 编辑 工作 。PS 有 很 多 功能 ,在 图 像 . 图 形 、 文 字 、 视 频 、 出 版 等 各 方面 发 挥 
作用 。 

Photoshop 的 专长 在 于 图 像 处 理 ,而 不 是 图 形 创作 。 图 像 处 理 是 对 已 有 的 位 图 图 像 
进行 编辑 加 工 处 理 ,或 者 运用 一 些 特殊 效果 ,其 重点 在 于 对 图 像 的 加 工 。 图 形 创作 软件 是 
按照 用 户 的 构思 、 创 意 ,使 用 矢量 图 等 设计 图 形 。 

2) CorelDRAW 

CorelDRAW Graphics Suite 是 加 拿 大 Corel 公司 出 品 的 矢量 图 形制 作 工 具 软 件 , 用 
于 实现 矢量 动画 、 页 面 设计 、 网 站 制作 、 位 图 编辑 和 网 页 动画 等 多 种 功能 ,如 图 1-16 所 示 。 

它 是 一 套 屡 获 殊荣 的 图 形 、 图 像 编 辑 软 件 ,包含 两 个 绘图 应 用 程序 ,一 个 用 于 矢量 图 
及 页 面 设计 ,一 个 用 于 图 像 编辑 。 该 绘图 软件 组 合 带 给 用 户 强大 的 交互 式 工 具 , 便 于 创作 
多 种 富 于 动感 的 特殊 效果 及 点 阵 图 像 , 使 其 效果 在 简单 的 操作 中 就 可 实现 ,而 不 会 丢失 当 
前 的 工作 。CorelDRAW 的 全 方位 设计 及 网 页 功能 ,可 以 融合 到 用 户 现 有 的 设计 方案 中 ， 
灵活 性 十 足 。 

该 软件 套装 更 为 专业 设计 师 及 绘图 爱好 者 提供 了 简报 、 彩 页 .手册 产品 包装 、 标 识 、 
网 页 及 其 他 功能 ; 它 提供 的 智慧 型 绘图 工具 以 及 新 的 动态 向 导 , 可 以 充分 降低 用 户 的 操 
控 难 度 ,使 用 户 更 加 精确 地 创建 物体 的 尺寸 和 位 置 .减少 点 击 步骤 .节省 设计 时 间 。 


133 任务 实施 


(1) 分 别 使 用 IE 和 Chrome. 打 开 网 站 的 index. htm 文件 (如 图 1-17 所 示 ) 。 


站 | 


CE x 


四 


图 1-16 CorelDRAW 启动 界面 


QO@ 用 鼠标 右键 单 击 index. htm, 然 后 选择 “打开 方式 ”菜单 项 。 

@ 如 果 IE 和 Chrome 出 现在 弹出 的 菜单 中 ,直接 选择 相应 的 浏览 器 打开 。 

@ 如 果 IE 和 Chrome 没有 出 现在 弹出 的 菜单 中 , 单 击 * 选 择 默认 打开 程序 "。 在 弹 
出 的 “打开 方式 ?对 话 框 中 , 单 击 * 浏 览 "按钮 ,找到 IE 或 Chrome 应 用 程序 所 在 的 目录 。 

@ 另 一 种 方式 : 先 打 开 IE 和 Chrome, 再 将 index. htm 文件 拖 放 到 浏览 器 窗口 中 。 


回 同 


UltraEdit Microsoft Visual Studio 2010 
五 ” 测 oa 压 绽 文 件 [内 Microsoft Visual Studio 2013 
旱 jt indexrar'm 进兵 计 认 程序 (C).- 

FE E-mail.. 


1-17 使 用 Chrome 浏览 器 打开 网 页 


(2) 分 别 使 用 I 正和 Chrome, 查 看 网 页 的 源 文件 ,如 图 1-18 所 示 。 
@ 在 下 中 ,在 网 页 空白 处 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜单 中 选择 “查看 源 代码 ”; 


HO A [项 目 1 补 轨 体验 项 目 : 初 识 网 站 下 人 


打开 新 的 标签 页 (1) Ctrl+T 
译 介 教育 经 历 专长 工作 # 。。 打开 新 的 窗口 (N) Cul+N 
打开 新 的 隐身 窗口 四 t+Shift+N 


编 帮 - 100% + 证] 


打印 (P)... Curl+P 
网 页 另存 为 (A).…. bt 
查找 (F).… 


清除 浏览 数据 (CO- 
扩展 程序 (E) 


修改 葛 切 复制 (C) 类 贴 (P) 


任务 管理 器 (D 
创建 应 用 快捷 方式 (S)… 设置 (S) 
篇 3(E) 登录 到 Chrome-. 
关于 Google Chrome(G) 
开发 者 工具 (D) 
帮助 (E) » 


Cel+U 


JavaScript 控制 台 ()) 退出 (X) 


检查 设备 从 


图 1-18 用 IE 或 Chrom 浏览 器 查看 网 页 源 文件 


或 者 在 工具 栏 空白 处 单 击 鼠 标 右键 ,然后 勾 选 “菜单 栏 ", 再 选择 "查看 ”菜单 的 “ 源 ” 项 , 同 
样 会 显示 网 页 源 代 码 。 

@ 在 Chrome 中 ,在 网 页 空白 处 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜单 中 选择 “查看 网 页 
源 代码 ”; 或 者 在 工具 栏 单 击 “ 自 定义 及 控制 Google Chrome” 按 钮 ,在 弹出 的 菜单 中 选择 
“更 多 工具 ”, 再 选择 “查看 源 代码 ” ,同样 显示 网 页 源 代码 。 

@ 在 正和 Chrome 中 ,查看 网 页 源 文件 的 快捷 键 都 是 Ctrl 十 U。 

我 们 看 到 的 网 页 源 文件 里 的 代码 叫 作 HTML(Hyper Text Markup Language, 超 文 
本 标记 语言 ), 如 图 1-19 所 示 。HTML 虽然 被 叫 作 语言 ,但 并 不 是 一 种 编程 语言 , 它 主要 
用 来 描述 页 面 元 素 的 排版 .布局 和 格式 等 信息 。 

最 上 面 二 ! DOCTYPE… 记 的 作用 是 告知 浏览 器 使 用 哪 种 HTML 或 XTML 规范 解 
析 HTML 文本 。 主 体 部 分 由 写 在 过 之 里 的 成 对 的 标签 组 成 ,如 下 所 示 : 


< htm]l > 
<head > 
<title>x x x 的 个 人 网 站 </title> 
</head> 
<body> 


</body > 
</html > 


ESLIC“-//WSC//DTD XBTIL 1.0 Transitienal// 困 ” “http://wrv. 3.erg/TR/zhtall/DTD/zhtall-transittonal. dtd” 


tp:/ /wer v3. /xhtml 


50pr: 
20px:margini10pz- border-top:4px 


bacikground-insgesurl (ing/back. pne) ;right:0pr; botton:Opr;} 


a thumbnall-snall (widt 
a thimbnatl-snall > im 
aa thumbnatl-snall > di 
at:left;} 


a thumbnatl-snall :hover fo 


bg-prinary { b 39: color :#71; } 
bg-default { b ff; color:#000; } 
base Lb 00: 


argin:6pr 6px 6px Epx,} 
olor :#000; ai 


图 1-19 用 焉 打开 的 网 页 源 文件 


其 中 ,二 html 记 与 二 /html 志 之 间 的 文本 描述 网 页 ; 二 head 记 与 二 /head 二 之 间 的 文 
体 描 述 网 页 的 头 部 信息 ; 二 body 二 与 二 /body 二 之 间 的 文本 是 可 见 的 页 面 内 容 ; 到 title 二 
和 二 /title 二 指定 网 页 的 标题 ,打开 一 个 网 页 时 ,标题 将 显示 在 浏览 器 窗口 的 标题 栏 或 状 
态 栏 。 关 于 HTML 语言 的 内 容 , 将 在 项 目 2 中 详细 讲解 。 


134 知识 拓展 
1. 网 页 中 的 图 片 格式 


网 页 中 有 丰富 的 图 片 资 源 。 表 1-2 列 出 了 网 页 中 常见 的 图 片 格式 及 其 优 缺 点 。 
表 1-2 图 片 格式 及 其 优 缺 点 


图 片 类 型 优 点 缺 ”点 
支持 1 位 到 24 位 颜色 深度 
BMP “| 格式 与 现 有 Windows 程序 (尤其 是 | BMP 不 支持 压缩 ,这 会 造成 文件 非常 大 
较 旧 的 程序 ) 广 泛 兼 容 
支持 高 级 别 无 损耗 压缩 较 旧 的 浏览 器 和 程序 可 能 不 支持 PNG 文件 
支持 Alpha 通道 透明 度 作为 Internet 文件 格式 ,与 JPEG 的 有 损耗 压缩 相 比 ， 
PNG | 支持 伽 马 校正 PNG 提供 的 压缩 量 较 少 


支持 交错 
受 最 新 的 Web 浏览 器 支持 


作为 Internet 文件 格式 ,PNG 对 多 图 像 文件 或 动画 文 
件 不 提供 任何 支持 


[OO [Bl 


续 表 
图 片 类 型 优 点 缺点 
- 有 损耗 压缩 使 原始 图 片 数据 质量 下 降 
ple hn 当 编 辑 和 重新 保存 JPEG 文件 时 ,原始 图 片 数据 的 质 
JPG 量 下 降 。 这 种 下 降 是 累积 性 的 


支持 交错 (对 于 渐 近 式 JPEG 文件 ) 
JPEG 广泛 支持 Internet 标准 


JPEG 不 适用 于 所 含 颜色 很 少 . 具 有 大 块 颜色 相近 的 
区 域 或 亮度 差异 十 分 明显 的 较 简单 的 图 片 


GIF 


GIF 广泛 支持 Internet 标准 
支持 无 损耗 压缩 和 透明 度 


GIF 只 支持 256 色调 色 板 。 因 此 ,详细 的 图 片 和 写实 
摄影 图 像 会 丢失 颜色 信息 ,而 看 起 来 是 经 过 调 色 的 
在 大 多 数 情况 下 ,无 损耗 压缩 效果 不 如 JPEG 格式 或 
PNG 格式 

GIF 支持 有 限 的 透明 度 , 没 有 半 透 明 效果 或 褪色 效果 
(例如 ,Alpha 通道 透明 度 提 供 的 效果 ) 


在 网 页 设计 过 程 中 ,选择 图 片 格式 可 以 参考 如 表 1-3 所 示 的 标准 。 
表 1-3 图 片 格式 选择 表 


颜色 数目 格式 选择 
1( 黑 白 ) GIF ,分 辩 率 为 72 像素 /英寸 (ppi) 
16 GIF ,分 辩 率 为 72ppi 
256( 简 单 图 片 ) GIF ,分 辩 率 为 72ppi 
256( 复 杂 图 片 ) JPEG ,分 辩 率 为 72ppi 
超过 256 JPEG 或 PNG ,分辨 率 为 72ppi 
2. 网 页 中 的 动画 
1) GIF 动画 


GIF(Graphics Interchange Format) 的 原 义 是 “图 像 互 换 格式 ”, 是 一 种 常见 的 图 像 文 
件 格 式 , 目 前 几乎 所 有 相关 软件 都 支持 它 。GIF 格式 的 特点 是 其 在 一 个 GIF 文件 中 可 以 
存储 多 幅 彩 色 图 像 。 如 果 把 存 于 一 个 文件 中 的 多 幅 图 像 数 据 逐 幅 读 出 并 显示 到 屏幕 上 ， 
可 构成 最 简单 的 动画 。 

2) Flash 动画 

Flash 动画 是 指 利用 Flash 软件 设计 、 制 作 发 布 的 动画 以 及 交互 作品 。Flash 动画 使 
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用 矢量 图 形 , 所 以 在 输出 动画 方面 更 加 适合 卡通 动画 制作 ,相应 的 文件 数据 比 位 图 动画 小 
得 多 。Flash 输出 动画 图 像 为 真 彩 ,能 够 较 全 面 地 反映 真实 的 色彩 环境 。 另 外 ,Flash 动 
画 具 有 真正 的 多 媒体 意义 ,如 支持 导入 音乐 文件 ,支持 交互 内 容 等 ,是 其 他 动画 制作 软件 
不 能 比拟 的 。 

3) CSS 动画 

CSS 是 一 种 格式 化 网 页 的 标准 方法 。 在 最 新 的 CSS 3. 0 中 ,动画 是 一 种 新 的 特性 , 它 
可 以 在 不 借助 JavaScript 和 Flash 的 情况 下 使 绝 大 多 数 HTML 元 素 动 起 来 。 现 在 , 它 被 
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Webkit 家 族 的 浏览 器 以 及 Firefox 支持 。 有 了 CSS 动画 ,可 以 给 页 面 元 素 加 入 互动 性 ; 
配合 JavaScript, 它 可 以 用 来 制作 网 页 游戏 。 


1.4 编辑 与 调试 


141 工作 任务 


。 使 用 网 页 开发 软件 打开 网 页 进行 编辑 
。 修改 网 页 标题 ,并 观察 修改 结果 

。 使 用 Chrome 调试 网 页 

。 使 用 IE11 调试 网 页 


142 任务 实施 
1. 使 用 网 页 开发 软件 打开 网 页 进行 编辑 


使 用 网 页 开发 工具 (参考 “1. 2 搭建 开发 环境 ") 打 开 index. htm。 对 于 使 用 IDE 的 
用 户 , 使 用 “打开 网 站 ”的 功能 打开 站 点 根 目录 ,IDE 会 自动 加 载 整 个 网 站 所 有 的 资源 。 


2. 修改 网 页 标题 ,并 观察 修改 结果 


(1) 在 编辑 器 中 ,找到 “一 title 二 个 人 主页 二 /title 之 ”字样 ,然后 将 “个 人 主页 ”这 4 个 
字 改 成 “真实 姓名 十 个 人 主页 ”。 例 如 .,“ 张 三 的 个 人 主页 ”。 
(2) 保存 网 页 。 


3. 使 用 Chrome 调试 网 页 


(1) 使 用 Chrome 再 次 打开 index. htm。 如 果 网 页 已 经 在 浏览 器 中 打开 , 单 击 工具 栏 
的 “刷新 ”按钮 ,或 按 F5 键 ,刷新 网 页 。 

(2) 网 页 刷新 后 ,观察 网 页 标题 栏 的 标题 信息 。 

(3) 按 Fl12 键 , 弹 出 “开发 人 员工 具 ” 窗 口 。 单 击 工具 栏 “Toggle device mode” 按 钮 ， 
启用 移动 设备 模拟 器 浏览 网 页 。 

(4) 单 击 “ 开 发 者 工具 ”工具 栏 *Hide drawer” 按 钮 ,在 弹出 的 “Emulation” 属 性 页 中 
切换 Device 的 Model, 观 察 网 页 的 变化 。 


4. 使 用 IE 调试 网 页 


(1) 使 用 IE 再 次 打开 index. htm, 如 果 网 页 已 经 在 浏览 器 打开 中 , 单 击 工 具 栏 * 刷 新 ” 
按钮 ,或 按 F5 键 ,刷新 网 页 。 

(2) 网 页 刷新 后 ,观察 网 页 标题 栏 的 标题 信息 。 

(3) 按 Fl2 键 ,弹出 “开发 人 员工 具 ” 窗 口 。 单 击 工具 栏 “ 仿 真 ”按钮 ,尝试 切换 不 同类 
型 的 “模式 ”“ 显 示 ” 值 ,观察 网 页 的 变化 。 
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1.5 发 布 与 测试 


151 工作 任务 


。 配置 IIS 网 站 

。 通过 本 机 地 址 访问 网 站 
。 配置 Windows 防火 墙 

。 通过 远程 计算 机 访问 网 站 


152 任务 实施 
1. 配置 IIS 网 站 
(1) 打开 JIS 管理 器 ,进入 管理 界面 。 选 中 “Default Web Site”, 如 图 1-20 所 示 。 


1-20 IIS 管理 界面 


(2) 单 击 右 侧 的 “基本 设置 ?或 “高 级 设置 ,在 弹出 的 对 话 框 中 设置 网 站 的 主 目录 ,如 
1-21 所 示 。 

(3) 单 击 右 侧 的 “ 绑 定 ...”, 选 中 要 绑 定 的 网 站 ,然后 单 击 * 编 辑 " 按 钮 ,如 图 1-22 
所 示 。 

(4) 单 击 IP 地 址 下 拉 框 ,弹出 当前 系统 的 IP 地 址 。 选 中 该 地 址 ,保持 默认 的 80 端 
口 ,然后 单 击 “ 确 定 ” 按 钮 ,如 图 1-23 所 示 。 


网 站 名 称 (S): 
Default Web Site 


图 1-22 IIS 网 站 绑 定 设置 界面 


总 Default Web site 主页 


有 i 上 


返回 的 默认 文件 。 按 优 文件 “indexht 


图 1-23 IIS 网 站 默认 文档 设置 界面 


(5) 在 主 界面 中 ,找到 “上 默认 文档 ”, 双 击 进 入 设置 界面 。 
(6) 检查 “index. htm” 是 否 在 默认 文档 列表 中 。 如 果 没 有 ,在 右 侧 单 击 “ 添 加 ”按钮 ， 
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将 "index. htm” 添 加 到 默认 文档 列表 中 ,并 将 其 移动 到 列表 顶部 ,如 图 1-24 所 示 。 
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通知 状态: Windows 防火 培 阻 止 新 程序 时 通知 我 
回馈 人 ms aseg | 
公共 场所 (60 机 场 或 对 啡 店 ) 中 的 网 络 
Windows 防火 培 杖 态 : 启用 | 
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网 络 和 共享 中 心 通知 状态: Windows 防火 过 蛆 止 新 程序 时 通知 我 | 


图 1-24 Windows 防火 墙 设置 界面 
(7) 在 右 侧 单 击 “ 启 用 ”。 
2. 通过 本 机 地 址 访问 网 站 


(1) 在 本 机 打开 浏览 器 ,然后 在 地 址 栏 中 输入 本 机 的 IP 地 址 ,查看 网 页 是 否 正常 
显示 。 
(2) 在 本 机 打开 浏览 器 ,然后 在 地 址 栏 中 输入 “localhost”, 查 看 网 页 是 否 正 常 显 示 。 


3. 配置 Windows 防火 墙 


(1) 依次 单 击 “ 开 始 ” 一 “控制 面板 ”>“Windows 防火 墙 ”, 弹 出 防火 墙 设置 界面 ,如 
图 1-25 所 示 。 

(2) 单 击 左 侧 “ 允 许 程 序 通 过 Windows 防火 墙 通信 ”。 

(3) 在 “允许 的 程序 和 功能 ”中 选中 “万 维 网 服务 (HTTP)”, 并 勾 选 右 侧 所 有 的 网 络 
设置 ,然后 单 击 下 方 的 “确定 ”按钮 ,如 图 1-26 所 示 。 

(4) 单 击 “ 高 级 安全 Windows 防火 墙 ”, 选 择 “ 人 站 规则 ”。 

(5) 在 “和 人 站 规则 ”列表 中 ,找到 “万 维 网 服务 (HTTP 流入 量 )”, 查 看 是 否 已 启用 。 如 
未 启用 ,请 启用 该 规则 ,如 图 1-27 所 示 。 
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图 1-26 Windows 防火 墙 开启 WWW 服务 界面 
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图 绚 网 放 8 影 人 的 连接 (TCp Im) 
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@ Rs 发 现 INB-Name-Im 
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图 1-27 Windows 防火 墙 人 站 规则 界面 


4. 通过 远程 计算 机 访问 网 站 
在 远程 计算 机 打开 浏览 器 ,然后 在 地 址 栏 中 输入 本 机 IP 地 址 ,查看 网 页 是 否 正常 显 


示 , 如 图 1-28 所 示 。 


起 这 时 间 


2007 年 9 月 至 2012 年 ?月 


YK 12345678901 


2012 年 9 月 至 2014 年 ?月 


YOK 12345678901 


2014 年 9 月 至 2016 年 ?月 


WK 12345678901 


2016 年 9 月 至 今 


WK 12345678901 


图 1-28 通过 远程 计算 机 打开 的 网 页 
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153 知识 拓展 


在 配置 IIS 以 及 防火 墙 时 ,会 遇 到 “端口 "这 个 概念 。 可 以 这 样 说 ,端口 是 计算 机 与 外 
部 通信 的 途径 。 两 台 计 算 机 如 果 需 要 通过 网 络 通信 ,除了 在 物理 上 要 使 用 网 络 设备 连接 
以 外 ,还 需要 在 通信 过 程 中 指定 双方 的 端口 号 。 

对 于 一 个 网 站 来 说 ,要 对 外 提供 HTTP 服务 ,默认 的 是 “80” 端 口号 。 在 浏览 器 访问 
网 站 时 ,在 浏览 器 地 址 栏 输入 域名 (如 www. baidu. com) ,其 实 就 是 连接 该 网 站 服务 器 的 
80 端口 。 

与 80 端口 是 HTTP 服务 的 默认 端口 类 似 , 还 有 很 多 常用 端口 ,范围 是 0 一 1023。 这 
些 端口 号 一 般 固 定 分 配给 一 些 服务 。 比 如 ,21 端口 分 配给 FTP 服务 ,25 端口 分 配给 
SMTP( 简 单 邮件 传输 协议 ) 服 务 ,135 端口 分 配给 RPC( 远 程 过 程 调用 ) 服 务 。 

在 TCP/IP 协议 中 ,端口 号 的 范围 是 0 一 65535。 除 了 之 前 介绍 的 ,1024 一 65535 端口 
号 一 般 不 固定 分 配给 某 个 服务 ,也 就 是 说 ,许多 服务 都 可 以 使 用 这 些 端 口 。 只 要 运行 的 程 
序 向 系统 提出 访问 网 络 的 申请 ,系统 就 可 以 从 这 些 端口 号 中 分 配 一 个 供 该 程序 使 用 。 比 
如 ,1024 端口 分 配给 第 一 个 向 系统 发 出 申请 的 程序 。 关 闭 程序 进程 后 ,将 释放 所 占用 的 
端口 号 。 


1.6 技术 要 点 


本 章 围 绕 一 个 体验 网 站 的 配置 .调试 和 部 署 , 介 绍 了 网 页 设计 中 的 开发 环境 及 工具 ， 
网 页 设计 ,调试 的 过 程 与 方法 以 及 网 站 发 布 的 操作 步骤 。 


1.7 项 目 进 阶 
在 “1.5 发 布 与 测试 "中 ,将 网 站 发 布 到 默认 站 点 下 ,请 将 该 站 点 删除 ,然后 重新 创建 
一 个 站 点 ,并 设置 该 站 点 的 端口 号 为 *8000”。 配 置 结束 后 ,分 别 在 本 地 和 远程 访问 该 网 


站 。 若 访问 有 问题 ,请 尝试 通过 调整 服务 器 防火 墙 的 入 站 规则 ,允许 远程 计算 机 访问 该 
网 站 。 


1.8 课外 实践 


请 下 载 试用 本 章 介绍 的 各 种 浏览 器 及 开发 工具 。 


Fo 


知识 目标 : 

。 掌握 网 页 的 基本 结构 

。 掌握 网 页 中 基本 元 素 的 使 用 方法 
。 掌握 CSS 格式 化 网 页 元 素 的 方法 
能 力 目标 : 

。 能 规划 设计 单 页 网 站 

。 能 为 网 页 添加 基本 元 素 

。 能 使 用 CSS 控制 网 页 元 素 的 样式 


2.1 项 目 介 绍 


本 项 目的 目标 是 设计 个 人 主页 网 站 。 这 是 一 个 单 页 网 站 (整个 网 站 就 一 个 网 页 文 
件 ) ,用 于 展示 网 页 版 的 个 人 简历 。 本 项 目 分 为 以 下 8 部 分 : 四 网 站 规划 与 设计 ; 四 设计 
导航 模块 ; @® 设 计 个 人 简介 模块 ; @ 设 计 个 人 履历 模块 ; @ 设 计 个 人 荣誉 模块 ; @ 设 计 
照片 集 模块 ; 设计 作品 集 模块 ; @ 设 计 “ 与 我 联系 "模块 。 


2.2 知识 准备 


网 页 的 核心 是 超级 文本 标记 语言 (HTML), 通 过 结合 使 用 其 他 Web 技术 (如 脚本 语 

、 公 共 网 关 接口 、 组 件 等 ) ,创造 功能 强大 的 网 页 。 因 而 ,超级 文本 标记 语言 是 万 维 网 
(Web) 编 程 的 基础 ,也 就 是 说 ,万 维 网 是 建立 在 超 文本 基础 之 上 的 。 之 所 以 称 其 为 超 文本 
标记 语言 ,是 因为 文本 中 包含 了 “超级 链接 ”点 。 

超级 文本 标记 语言 是 标准 通用 标记 语言 下 的 一 个 应 用 ,也 是 一 种 规范 、 一 种 标准 , 它 
通过 标记 符号 来 标记 要 显示 的 网 页 中 的 各 个 部 分 。 

超级 文本 标记 语言 文档 制作 不 是 很 复杂 ,但 功能 强大 ,支持 不 同 数据 格式 的 文件 内 
入 ,这 也 是 万 维 网 (WWW) 盛 行 的 原因 之 一 ,其 主要 特点 如 下 所 述 。 

(1) 简易 性 : 超级 文本 标记 语言 版 本 升级 采用 超级 方式 ,从 而 更 加 灵活 、 方 便 。 


下 
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(2) 可 扩展 性 : 超级 文本 标记 语言 的 广泛 应 用 带 来 了 加 强 功能 ,增加 标识 符 等 要 求 。 
超级 文本 标记 语言 采取 子 类 元 素 的 方式 ,为 系统 扩展 提供 保证 。 

(3) 平台 无 关 性 : 虽然 个 人 计算 机 大 行 其 道 ,但 使 用 MAC 等 其 他 机 器 的 大 有 人 在 ， 
超级 文本 标记 语言 可 以 使 用 在 广泛 的 平台 上 ,这 也 是 万 维 网 (WWW) 盛 行 的 另 一 个 原因 。 

(4) 通用 性 : HTML 是 网 络 通用 语言 ,是 一 种 简单 .通用 的 全 置 标记 语言 。 它 允许 网 
页 制作 人 建立 文本 与 图 片 相 结合 的 复杂 页 面 ,这 些 页 面 可 以 被 网 上 其 他 任何 人 浏览 ,而 无 
论 使 用 的 是 什么 类 型 的 计算 机 或 浏览 器 。 
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1. 认识 HTML 语言 


HTML 的 英文 全 称 是 Hypertext Marked Language, 中 文 叫 作 “ 超 文本 标记 语言 ”。 
和 一 般 文 本 不 同 的 是 ,一 个 HTML 文件 不 仅 包含 文本 内 容 , 还 包含 一 些 Tag, 中 文 称 为 
“标记 ”。HTML 文件 的 后 级 名 是 . htm 或 . html。 用 文本 编辑 器 可 以 编写 HTML 文件 。 
下 面 用 最 简单 的 记事 本 来 编辑 一 个 HTML 文件 。 
【实例 2-1】 打开 Notepad, 新 建 一 个 文件 ,复制 以 下 代码 到 新 文件 中 ,然后 将 该 文件 
保存 为 first. html, 如 图 2-1 所 示 。 
<html> 
<head> 
<title > 我 的 第 一 个 网 页 </title> 
</head> 
<body> 
< hl > HTML 概述 </hl > 
<b>1\、 认 识 HTML 语言 </b> 
<p> HTML 的 英文 全 称 是 Hypertext Marked Language, 中 文 叫 作 “ 超 文本 标记 语言 "。 和 一 
般 文本 不 同 的 是 ,一 个 HTML 文件 不 仅 包 含 文本 内 容 ,还 包含 一 些 Tag, 中 文 称 “ 标 记 ”。</p> 
</body> 
</htm] > 
要 浏览 这 个 first. html 文件 ,双击 它 ; 或 者 打开 浏览 项, 在 “File” 菜 单 选择 “Open”, 然 
后 选择 该 文件 。 显 示 效 果 如 图 2-2 所 示 。 
示例 解释 如 下 。 
该 文件 的 第 一 个 标记 是 二 html> ,告诉 浏览 器 : 这 是 HTML 文件 的 头 。 文 件 的 最 后 
一 个 标记 是 二 /html> ,表示 HTML 文件 到 此 结束 。 
去 head> 和 到 /head> 之 间 的 内 容 是 Head 信息 ,不 显示 出 来 ,在 浏览 器 里 看 不 到 ,但 
是 并 不 表示 这 些 信息 没有 用 处 。 比 如 ,可 以 在 Head 信息 里 加 上 一 些 关 键 词 ,有 助 于 搜索 
引擎 搜索 到 用 户 的 网 页 。 
<title 之 和 到 /title 之 之 间 的 内 容 是 文件 的 标题 。 可 以 在 浏览 器 顶端 的 标题 栏 看 
到 它 。 
二 body 二 和 二/body> 之 间 的 信息 是 正文 。 
二 hl 之 和 去 /hl 之 之 间 表 示 一 级 标题 文字 ,以 此 类 推 , 还 可 以 有 所 h2 之 二 h3 盖 


<hl>HTML 概 述 </hl> 
<b>1、 认 识 HTML 语 言 《/b> 


<p>HTML 的 英文 全 称 是 Hypertext Marked Language， 中 文 叫 作 “ 超 文 本 标记 语言 ”。 和 一 般 文本 不 同 
J] 是， 一 个 HTML 文 件 不 仅 包 含 文本 内 容 ， 还 包含 一 些 Tag， 中 文 称 “ 标 记 ”-《/p> 

</body> 

</html> 


图 2-1 在 记事 本 中 创建 一 个 HTML 文件 


a c: 
HTML 概 述 
1、 认 识 HTML 语 言 


HTML 的 英文 全 称 是 Hypertext Marked Language， 中 文 叫 作 “ 超 文本 标记 语言 ”。 和 一 般 文 本 
不 同 的 是 ， 一 个 HTML 文 件 不 仅 包含 文本 内 容 ， 还 包含 一 些 Tag， 中 文 称 “标记 ”。 


图 2-2 第 一 个 网 页 在 浏览 器 中 的 显示 效果 


二 h4 二 … 标 题 。 
< 一 b> 和 到 /b> 之 间 的 文字 用 粗 体 表示 。<b> 是 bold 的 意思 。 
二 hl 宝 和 二 /hi 这 之 间 是 段落 文字 。 
HTML 文件 看 上 去 和 一 般 文 本 类 似 , 但 是 比 一 般 文 本 多 了 标记 ,比如 二 html 之 一 b> 
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等 。 通 过 这 些 标记 ,告诉 浏览 器 如 何 显示 文件 。 

1) HTML 元 素 (HTML Elements) 

HTML 元 素 (HTML Element) 用 来 标记 文本 ,表示 文本 的 内 容 。 比 如 ,body、p.title 就 
是 HTML 元 素 。 

HTML 元 素 用 标记 表示 ,标记 写 在 二 之 中 。 标 记 通 常 成 对 出 现 ,比如 志 body 之 二 /body>。 
起 始 的 叫 作 Opening Tag (开始 标记 ) ,结尾 的 叫 作 Closing Tag (结束 标记 )。 目 前 ， 
HTML 的 标记 不 区 分 大 小 写 。 比 如 ,二 HTML 这 和 二 html 二 是 相同 的 。 

2) HTML 元 素 (HTML Elements) 的 属性 

HTML 元 素 可 以 拥有 属性 ,用 于 扩展 HTML 元 素 的 能 力 。 比 如 ,使 用 bgcolor 属 
性 ,使 页 面 的 背景 色 成 为 红色 : 


< body bgcolor = "red"> 
再 比如 ,使 用 border 属性 ,将 一 个 表格 设置 成 无 边框 的 ,如 下 所 示 : 
< table border = "0"> 


定义 属性 时 ,通常 属性 名 和 值 成 对 出 现 , 如 name 王 "value"。 对 于 上 例 的 bgcolor， 
border 就 是 name,red 和 0 就 是 value。 属 性 值 一 般 用 双 引 号 标记 。 属 性 通常 是 附加 给 
HTML 的 Opening Tag, 而 不 是 Closing Tag。 


2. HTML 常用 标记 


HTML 中 定义 了 很 多 标记 ,本 节 仅 介绍 一 些 常 用 标记 ,其 他 标记 在 后 续 章节 中 陆续 
介绍 。 

1) 外 部 链接 (a) 

<a href = "http://www.baidu.com" target ="_blank"> 百 度 </a> 

<a href = " 歌 名 .mp3"> 歌 曲名 称 </a> 

(1) href 属性 : 链接 的 目标 ,可 以 是 网 址 .电子 邮件 地 址 文件 路 径 。 地 址 一 般 写 成 
相对 地 址 ,尽量 不 要 写 绝对 地 址 。*“. ./” 表 示 当 前 目录 的 上 一 级 目录 ,“../../” 表 示 当 前 
目录 的 上 一 级 的 上 一 级 。 

(2) target 属性 : _blank, 在 新 窗口 中 打开 被 链接 文档 ; _self, 上 默认, 在 相同 的 框架 中 
打开 被 链接 文档 ; _parent, 在 父 框架 中 打开 被 链接 文档 ; _top, 在 整个 窗口 中 打开 被 链接 
文档 。 

2) 内 部 链接 (a) 


<a href ="#info"> 点 击 这 个 就 会 跳 转 到 id 为 info 的 元 素 </a> 


用 途 : 打开 指定 网 页 的 指定 位 置 (使 用 id 标识 ) 。 
3) 图 片 img) 


< img src= "1. jpg" alt = "无 图 显示 汉字 " title = "鼠标 置顶 显示 汉字 "/> 
(1) src 属性 : 图 片 的 地 址 。 


(2) alt 属性 : 当 图 片 不 显示 时 ,出 现在 该 位 置 ( 原 显示 图 片 ) 的 文字 。 

(3) title 属性 : 鼠标 移 到 图 片上 ,出 现 的 提示 文字 。 

一 img 之 没有 结束 标签 。 要 正确 关闭 该 标签 ,应 写 为 : 一 img xxx 一 "" yyy 一 "" /这 。 

4) 表格 

表格 由 一 系列 元 素 组 成 : table( 表 格 ) \tr( 行 ) .th( 标 题 单 元 格 ) 和 td( 普 通 单元 格 ) 。 

(1) 表格 元 素 (table) 。 

OO align 属性 : 设置 表格 水 平方 向 的 对 齐 方式 (left center 或 right) 。 只 能 对 整个 表 
格 在 浏览 器 页 面 范围 内 居中 对 齐 ,但 是 表格 里 单元 格 的 对 齐 方式 不 会 因此 而 改变 。 如 果 
要 改变 单元 格 的 对 齐 方式 ,需要 在 行 、 列 或 单元 格 内 另行 定义 

@ cellspacing 属性 和 cellpadding 属性 : 设置 表格 内 部 每 个 单元 格 之 间 的 距离 (单位 
px); 设置 单元 格 边框 与 单元 格 里 内 容 之 间 的 距离 。 默 认 情况 下 ,单元 格 里 的 内 容 紧 贴 表 
格 的 边框 。 

<table align = "center" cellspacing = "10" cellpadding = "10"> 

</table> 

(2) 表格 行 元 素 (tr) 。 

QO@ align 属性 : 行文 字 的 水 平 对 齐 方式 ,left .center 或 right。 

@ valign 属性 : 行文 字 的 垂直 对 齐 方式 ,top .bottom 或 middle。 

(3) 单元 格 元 素 (td) 。 

其 操作 对 象 是 表格 里 的 每 一 个 单元 格 。 

@ align 属性 : 单元 格 文字 的 水 平 对 齐 方式 ,left center 或 right。 

@ valign 属性 : 单元 格 文字 的 垂直 对 齐 方式 ,top .bottom 或 middle。 

@ colspan 属性 : 控制 字段 横向 的 合并 数目 ,其 值 为 合并 右边 的 单元 格 的 个 数 。 

@ rowspan 属性 : 控制 字段 纵向 的 合并 数目 ,其 值 为 合并 下 面 的 单元 格 的 个 数 。 

(4) 标题 单元 格 元 素 (th) 。 

该 标签 出 现在 表格 内 的 第 一 行 , 是 td 标签 的 特殊 情况 ,是 描述 表格 的 字段 名 称 。 显 
示 情 况 为 黑体 居中 。 

5) 段落 (p) 与 换行 (br) 

Pp 元 素 用 于 划分 段落 , 写 为 : 去 p> 段 内 内 容 二 /p 之 。 该 段 和 下 段 之 间 由 空 行 隔 开 。 

br 元 素 用 于 段 内 强制 换行 。 所 br 一 没有 结束 标签 ,要 正确 关闭 该 标签 ,应 写 为 : 二 br/>。 

6) 水 平分 割 线 (hr) 

该 标记 表示 插入 一 条 水 平分 割 线 。 

(1) 属性 width: 水 平 线 的 宽度 : 二 hr width 一 "宽度" 二。 宽度 可 以 是 百分比 (相对 
浏览 器 , 随 着 浏览 器 的 大 小 而 改变 ) 。 

(2) 属性 size: 水 平 线 的 高 度 : 二 hr size 一 "高度" 二。 高 度 只 能 为 像素 。 

(3) 属性 color: 水 平 线 的 颜色 : 二 hr color 一 "颜色 "二 。 

(4) 属性 align: 水 平 线 的 对 齐 方 式 : 二 hr align 一 "对 齐 方式 "二 ,可 以 是 center,left 
或 right。 默 认为 居中 对 齐 。 
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7) 多 级 标题 (hl … h6 .headline) 


< hl > 一 级 标题 </hl > 
<h6 > 六 级 标题 </h6 > 
8) 有 序列 表 (ol,ordered list) 
列表 中 的 项 目 有 先后 顺序 ,根据 顺序 来 表示 重要 的 程度 。 一 般 采 用 数字 或 字母 作为 
序号 。 
<ol type= "1" start = "1"> 
<1i> 第 一 学 期 </1i> 
<1i> 第 二 学 期 </1i> 
<1i> 第 三 学 期 </1i> 
</ol > 
(1) type 属性 : 序号 类 型 为 1( 数 字 : 1,2,3,…); a( 小 写 英文 字母 : a,b,c,…); A 
(大 写 英文 字母 : A,B,C,…); i( 小 写 罗 马 数 字 : i,ii,iii,v,…); I( 大 写 罗马 数字 : I , IT， 
亚 , W ,…)。 默 认 ( 不 写 ) 为 “1”。 
(2) start 属性 : 只 能 是 整数 ,表示 序号 类 型 从 第 几 个 编号 开始 。 
9) 无 序列 表 (ul,unordered list) 
< ul type = "disc"> 
<1i> 网 页 设计 课程 </1i> 
<1i> 平 面 设计 课程 </1i> 
<1i> 毕 业 设 计 </1i> 
</ul> 
type 属性 : 序号 类 型 ,包括 disc( 黑 色 实 心 圆 点 ) ,circle( 空 心 圆 环 ) 或 square( 正 方 
形 )。 默 认 ( 不 写 ) 为 disc。 
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HTML5 是 HTML 第 5 次 重大 修改 后 形成 的 。2014 年 10 月 29 日 ,万 维 网 联盟 宣 
布 ,经 过 将 近 8 年 的 艰苦 努力 ,该 标准 规范 制定 完成 。HTML5 的 设计 目的 是 为 了 在 移动 
设备 上 支持 多 媒体 ,因此 引进 了 新 的 语法 特征 ,如 video audio 和 canvas 标记 。HTML5 
还 引进 了 新 的 功能 .可 以 真正 改变 用 户 与 文档 的 交互 方式 。 

目前 主流 的 浏览 器 支持 HTML5, 包 括 Firefox( 火 狐 浏览 器 )、IE9 及 其 更 高 版 本 、 
Chrome( 和 谷歌 浏览 器 ) 、Safari、.Opera 等 ; 国内 的 邀 游 浏览 器 (Maxthon) ,以 及 基于 IE 或 
Chromium(Chrome 的 工程 版 或 称 实验 版 ) 推 出 的 360 浏览 器 .搜狗 浏览 器 .QQ 浏览 器 、 
猎豹 浏览 器 等 同样 具备 支持 HTML5 的 能 力 。 

HTML5 提供 了 一 些 新 的 元 素 和 属性 ,例如 二 nav 二 (网 站 导航 块 ) 和 二 footer>。 这 
种 标签 有 利于 搜索 引擎 的 索引 整理 ,同时 更 好 地 帮助 小 屏幕 装置 和 视 障 人 士 使 用 。 除 此 
之 外 , 它 为 其 他 浏览 要 素 提 供 了 新 的 功能 .如 王 audio 之 和 二 video> 标 记 。 

一 些 过 时 的 HTML4 标记 将 被 取消 ,其 中 包括 纯粹 显示 效果 的 标记 ,如 过 font 之 和 
二 center 这 ,它们 被 CSS 取代 。 
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对 于 网 页 开发 来 说 ,HTML5 有 如 下 重大 变化 。 
1. 文档 具有 语义 化 特性 


在 HTML4 中 ,文档 不 具有 语义 结构 ,实际 上 更 多 的 是 排版 的 作用 。HTML5 通过 一 
些 新 增 的 标记 标识 文档 的 语义 ,如 下 所 述 。 

(1) section: 定义 文档 中 的 节 ( 区 域 ); 

(2) header: 页 面 上 显示 的 页 眉 ,与 head 元 素 不 同 ; 

(3) footer: 页 面 上 显示 的 页 脚 ,一 般 用 来 显示 网 站 版 权 信 息 或 联系 方式 ; 

(4) nav: 网 站 导航 部 分 ; 

(5) article: 指定 网 站 的 文章 内 容 部 分 ,如 博客 内 容 、 杂 志 内 容 等 。 

使 用 这 些 结 构 化 语义 的 元 素 ,使 得 HTML 代码 更 加 容易 识 读 , 也 让 整个 页 面 结构 更 
清晰 。 

下 面 用 一 个 简单 的 实例 介绍 如 何在 Dreamweaver 中 创建 一 个 具有 语义 化 特性 的 小 
页 面 。 

【实例 2-2】 打开 Dreamweaver CS6 ,执行 菜单 命令 “编辑 ”一 “首选 参数 ”, 打 开 “ 首 选 
参数 ”对 话 框 ,从 中 选择 “新 建文 档 ” 列 表 项 ,如 图 2-3 所 示 。 


旱 认 文档 (8) : 


默认 扩展 名 (E) : 
默认 文档 类 型 DTD) : [ER 
默认 编码 (0) : [Unicode UTR-8) 可 
国 当 打开 未 指定 编码 的 现 有 文件 时 使 用 
Unicode 标准 化 表单 (F) : [Ga 规范 分 解 后 跟 规 范 合成 ) 
园 包 括 Unicode 签名 (BOID (8) 


时 装 测 描 计 证 计 讶 加 i 


改 语 1 
如 01 


回 按 Control+H 组 合 键 时 显示 “新 建文 档 ” 对 话 框 (1) 


图 2-3 设置 默认 新 建 HTML5 文档 


在 默认 文档 类 型 (DTD) 的 下 拉 列 表 框 中 选择 “HTML5”, 则 今后 新 建 的 HTML 文档 
自动 以 HTML5 模板 格式 创建 。 

接着 ,通过 菜单 新 建 一 个 HTML 文档 ,可 以 看 到 HTML5 的 模板 ,如 图 2-4 所 示 。 

在 左 侧 的 代码 区 编辑 以 下 内 容 : 


图 2-4 新 建 一 个 HTML5 文档 


<!DOCTYPE HTML > 
< html > 
< head> 
<title> 示 例 2-2</title> 
<meta charset = "utf - 8"> 
</head> 
<body> 
<header> 
< hl > 小 米 的 博客 </hl > 
</header > 
<nav> 
<ul> 
<1i><ahref="#"> 首 页 </a></1i> 
<1i><a href = "#"> 博 文 </a></1i> 
<1i><a href ="#"> 相 册 </a></1i> 
<1i><a href="#"> 个 人 档案 </a></1i> 
</ul> 
</nav > 
< div id = "container"> 
< section> 
<article> 
<header > 
< hl > HTML5 </hl > 
</header > 
<p> HTML5 是 下 一 代 HTML 的 标准 ,目前 仍然 处 于 发 展 阶段 。 经 过 了 Web 2.0 时 代 , 基于 互联 
网 的 应 用 已 经 越 来 越 丰富 ,同时 也 对 互联 网 应 用 提出 了 更 高 的 要 求 。</p> 
< footer > 
<p> 编 辑 于 2015.5 </p> 
</footer > 
</article> 
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<article> 
<header> 
< hl > CSS3 </hl > 
</header > 
<p> 对 于 前 端 设计 师 来 说 ,虽然 CSS3 不 全 是 新 的 技术 ,但 它 却 重启 了 一 扇 奇 思 妙 想 的 窗口 。 
</p> 
< footer > 
<p> 编 辑 于 2015.5 </p> 
</footer > 
</article> 
</section> 
<aside> 
<article> 
< hl > 简介 </hl > 
<p><ahref= '# '> HTML5 和 CSS3 </a> 正 在 掀起 一 场 变革 ,它们 不 是 在 替代 Flash, 而 是 正在 
发 展 成 为 开放 的 Web 平台 ,不 但 在 移动 领域 建功 卓著 ,而且 向 传统 的 应 用 程序 发 起 挑战 。</p> 
</article> 
</aside> 
< footer > 
<p> 版 权 所 有 2015 </p> 
<p> gnbsp;</p> 
</footer > 
</div> 
</body> 
</html > 


然后 单 击 工具 栏 按钮 ,选择 一 个 浏览 器 查看 显示 效果 ,如 图 2-5 所 示 ; 也 可 以 直接 按 
Fl12 键 ,用 IE 浏览 器 打开 ,显示 效果 如 图 2-6 所 示 。 
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</honder> 


<p> 对 二 前 站 设计 师 ]。 巴克 在 
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</footer> 
</article> 
</saction| 
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a> 正 在 猴 起 - 不 是 在 ee: TT pb 
EE TMLS 是 下 一 人 HTML 的 标准 ， 目 前 仍然 处 于 发 展 阶段 .经 过 了 Web2 0 时代， 基于 互联 网 的 应 用 已 经 
和 越 丰 宫 ， 同 时 也 对 互联 网 应 用 提出 了 更 高 的 要 求 。 

对 传统 的 应 用 程序 发 起 挑战 ，</P> 


</article> 葵 匈 于 2015.5 
/saide> 
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图 2-5 选择 浏览 器 来 预览 /调试 页 面 
这 个 页 面 看 上 去 并 不 美观 。 没 关系 ,下 面 用 CSS 控制 页 面 的 显示 效果 。 


HTMLS 


一 代 HTML 的 标准 ， 目 前 仍然 处 于 发 展 阶段 - 经 过 了 Web 2.0 时 代 ， 基 于 互联 网 的 应 用 已 经 越 来 


HTML5 是 
越 丰富 ， 人 要 求 。 
编辑 于 2015.5 


CSS3 


对 于 前 端 设 计 师 来 说 ， 虽 然 CSS3 不 全 是 新 的 技术 ， 但 它 却 重 启 了 一 扇 奇 思 妙 想 的 窗口 。 
编辑 于 2015.5 
简介 


HTML5 和 CSS3 正 在 掀起 一 场 变革 ， 它 们 不 是 在 苦 代 Flash， 而 是 正在 发 展 成 为 开放 的 Web 平 台 ， 不 但 在 移动 
领域 建功 卓著 ， 而 且 向 传统 的 应 用 程序 发 起 挑战 。 
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图 2-6 在 IE 中 的 显示 效果 


2. 本 地 存储 


基于 HTML5 开发 的 网 页 APP 拥有 更 短 的 启动 时 间 和 更 快 的 联网 速度 ,这 些 得 益 
于 HTML5 APP Cache 以 及 本 地 存储 功能 : Indexed DB(HTML5 本 地 存储 最 重要 的 技 
术 之 一 ) 和 API 说 明文 档 。 


3. 设备 兼容 


HTML5 为 网 页 应 用 开发 者 提供 了 更 多 功能 上 的 优化 选择 , 带 来 了 更 多 体验 功能 的 
优势 。HTML5 提供 了 前 所 未 有 的 数据 与 应 用 接 人 开放 接口 ,使 外 部 应 用 可 以 直接 与 浏 
览 器 内 部 的 数据 相连 ,例如 视频 影音 可 直接 与 麦克 风 及 摄像 头 相连 。 

4. 高 效 网 络 连接 


HTML5 拥有 更 有 效 的 服务 器 推送 技术 ,Server-Sent Event 和 WebSockets 就 是 其 
中 的 两 个 特性 。 这 两 个 特性 能 够 帮助 服务 器 将 数据 “推送 "到 客户 端 。 
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5. 网 页 多 媒体 
支持 网 页 端的 Audio、Video 等 多 媒体 功能 ,与 网 站 自 带 的 APPS、 摄 像 头 影音 功能 
相得益彰 。 


6. 三 维 、 图 形 及 特效 


基于 SVG、Canvas、WebGL 及 CSS3 的 3D 功能 ,使 用 户 惊 叹 在 浏览 器 中 呈现 的 视觉 
效果 。 


7. 性 能 与 集成 


HTML5 通过 XMLHttpRequest2 等 技术 解决 了 路 域 等 问题 ,使 Web 应 用 和 网 站 在 
多 样 化 环境 中 更 快速 地 工作 。 


8. 支持 CSS3 


在 不 牺牲 性 能 和 语义 结构 的 前 提 下 ,CSS3 提供 了 更 多 的 风格 和 更 强 的 效果 。 此 外 ， 
较 之 以 前 的 Web 排版 ,Web 的 开放 字体 格式 (WOFF) 提 供 了 更 高 的 灵活 性 和 控制 性 。 


223 ”CSS 概述 


在 网 页 设计 中 ,HTML 用 于 显示 网 页 内 容 , 而 CSS(Cascading Style Sheets, 级 联 样 
式 表 ) 用 来 控制 网 页 显示 效果 ,例如 字体 、 颜 色 、 边 距 、 高 度 、 宽 度 、 背 景 图 像 高 级 定位 等 。 


1. 基本 语法 
CSS 基本 语法 格式 如 图 2-7 所 示 。 


p {background-color: #ff68686j; 


上 L 属性 值 例 如 红色 的 属性 


值 为 #ff 
属性 名 称 ,例如 背景 色 的 属性 名 称 为 


background-color 


选择 器 ,用 于 选择 一 个 或 多 个 HTML 元 素 ,被 选中 
的 元 素 的 样式 则 按 人 中 定义 的 显示 


2-7 ”CSS 基本 语法 格式 


2. 定义 CSS 的 方法 


CSS 的 定义 一 共有 3 种 方式 ,分 述 如 下 。 

1) 行内 样式 表 (style 属性 ) 

每 个 HTML 元 素 都 可 以 设置 style 属性 。 以 下 代码 通过 行内 样式 表 将 段落 背景 设 
为 红色 。 


<p style = "background - color: #ff0000"> 


< [ HTML5+C553 网 站 前 台 设 计 项 目 化 教程 | 


这 个 段落 是 红色 的 
</p> 
2) 内 部 样式 表 (style 元 素 ) 


如 果 网 页 中 所 有 的 p 元 素 都 是 红色 背景 ,可 以 将 这 段 样式 写 到 head 的 style 元 素 中 ， 
如 下 所 示 : 


< html > 
<head> 
< styletype = "text/css"> 
p {background — color: # ff0000;} 
</style> 
</head> 
<body> 
<p> 
这 个 段落 是 红色 的 
</p> 
</body> 
</html > 
3) 外 部 样式 表 ( 引 用 一 个 样式 表 文件 ,link) 
外 部 样式 表 是 一 个 扩展 名 为 css 的 文本 文件 , 它 通 常 存放 于 网 站 的 某 个 目录 下 (如 
style) 。 要 在 网 页 中 引用 一 个 外 部 样式 表 文 件 ( 如 style. css) ,可 以 在 HTML 文档 的 head 


部 分 创建 一 个 指向 外 部 样式 表 文 件 的 链接 (link) ,如 下 所 示 : 
< link rel = "stylesheet" type = "text/css" href = "style/style.css" /> 


href 属性 表示 CSS 文件 的 访问 路 径 。 

外 部 样式 表 是 大 部 分 网 站 采用 的 方式 , 它 能 灵活 地 管理 整个 网 站 的 样式 : 一 个 网 页 
可 以 在 head 部 分 引用 多 个 CSS 文件 ; 相应 地 ,同一 个 CSS 文件 可 以 被 多 个 网 页 引用 。 
在 这 种 情况 下 ,如 果 需 要 调整 某 个 样式 , 仅 需要 修改 对 应 的 CSS 文件 中 的 内 容 。 


3.CSS 选择 器 

(1) 通用 元 素 选 择 器 (* ) ,匹配 任何 元 素 。 

* {margin:0; padding:0; } 

(2) 标签 选择 器 (E) ,匹配 所 有 使 用 下 标签 的 元 素 。 

p{ font- size:2em; } 

(3) class 选择 器 (例如 . info) ,匹配 所 有 class 属性 中 包含 info 的 元 素 。 


. info { background: # ff0; } 
p. info { background:#ff0; } 


(4) id 选择 器 (例如 #footer) ,匹配 所 有 id 属性 为 footer 的 元 素 。 


# info { background: # ££0; } 
p# info { background: # ff0; } 
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4. CSS 背景 属性 (Background) 
CSS 背景 属性 如 表 2-1 所 示 。 
表 2-1 CSS 背景 属性 


属 性 描 述 
background 在 一 个 声明 中 设置 所 有 的 背景 属性 
background-attachment 设置 背景 图 像 是 否 固定 ,或 者 随 着 页 面 的 其 余部 分 滚动 
background-color 设置 元 素 的 背景 颜色 
background-image 设置 元 素 的 背景 图 像 
background-position 设置 背景 图 像 的 开始 位 置 
background-repeat 设置 是 否 及 如 何 重复 背景 图 像 


CSS 背景 属性 代码 如 下 所 示 。 


/* 背景 颜色 */ 
p {background - color: gray;} 


/* 背景 图 片 */ 
body {background — image: url(/i/eg_bg_04.gif);} 


/* 背景 图 片 重复 */ 

body 

‘ 
background - image: url(/i/eg_bg_03.gif); 
background - repeat: repeat — y; 


5. CSS 边框 属性 (Border) 
CSS 边框 属性 如 表 2-2 所 示 。 
表 2-2 CSS 边框 属性 


属 性 描 述 
border 在 一 个 声明 中 设置 所 有 的 边框 属性 
border-bottom 在 一 个 声明 中 设置 所 有 的 下 边框 属性 
border-bottom-color 设置 下 边框 的 颜色 
border-bottom-style 设置 下 边框 的 样式 
border-bottom-width 设置 下 边框 的 宽度 
border-color 设置 四 条 边框 的 颜色 


border-left 


在 一 个 声明 中 设置 所 有 的 左边 框 属性 


border-left-color 设置 左边 框 的 颜色 
border-left-style 设置 左边 框 的 样式 
border-left-width 设置 左边 框 的 宽度 


border-right 


在 一 个 声明 中 设置 所 有 的 右边 框 属性 


续 表 


属 性 描 述 
border-right-color 设置 右边 框 的 颜色 
border-right-style 设置 右边 框 的 样式 
border-right-width 设置 右边 框 的 宽度 
border-style 设置 四 条 边框 的 样式 
border-top 在 一 个 声明 中 设置 所 有 的 上 边框 属性 
border-top-color 设置 上 边框 的 颜色 
border-top-style 设置 上 边框 的 样式 
border-top-width 设置 上 边框 的 宽度 
border-width 设置 四 条 边框 的 宽度 

CSS 边框 属性 代码 如 下 所 示 。 

/* 边框 样式 */ 

p {border - style: solid; border — left — style: none;} 
/* 边框 宽度 */ 

p {border - style: solid; border — width: 5px;} 

/* 边框 颜色 */ 

p 


{ 
border - style: solid; 
border - color: blue red; 


6. CSS 尺寸 属性 (Dimension) 


CSS 尺寸 属性 如 表 2-3 所 示 。 
表 2-3 CSS 尺寸 属性 


属 性 描 述 
height 设置 元 素 高 度 
max-height 设置 元 素 的 最 大 高 度 
max-width 设置 元 素 的 最 大 宽度 
min-height 设置 元 素 的 最 小 高 度 
min-width 设置 元 素 的 最 小 宽度 
width 设置 元 素 的 宽度 


7. CSS 字体 属性 (Font) 


CSS 字体 属性 如 表 2-4 所 示 。 
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表 2-4 CSS 字体 属性 


属 性 描 述 
font 在 一 个 声明 中 设置 所 有 字体 属性 
font-family 规定 文本 的 字体 系列 
font-size 规定 文本 的 字体 尺寸 
font-size-adjust 为 元 素 规 定 aspect 值 
font-stretch 收缩 或 拉 伸 当前 的 字体 系列 
font-style 规定 文本 的 字体 样式 
font-variant 规定 是 否 以 小 型 大 写字 母 的 字体 显示 文本 
font-weight 规定 字体 的 粗细 


CSS 字体 属性 代码 如 下 所 示 。 
/* 指定 字体 系列 */ 


P 
{ 
font - family: Times，TimesNR，'New Century Schoolbook', Georgia, 'New York', serif; 
} 
/* 字 体 加 粗 */ 


p.: thick {font — weight :bold;} 


/* 字 体 大 小 */ 

h2 {font— size:40px;} 

h3 {font— size:2.5em;} 

/* 结合 使 用 百分比 和 EM* / 
body {font — size:100% ;} 
hl {font— size:3.75em;} 


h2 {font— size:2.5em;} 
p {font - size:0.875em;} 


8. CSS 外 边 距 属性 (Margin) 


CSS 外 边 距 属性 如 表 2-5 所 示 。 
表 2-5 CSS 外 边 距 属性 


属 性 描 述 
margin 在 一 个 声明 中 设置 所 有 外 边 距 属性 
margin-bottom 设置 元 素 的 下 外 边 距 
margin-left 设置 元 素 的 左 外 边 距 
margin-right 设置 元 素 的 右 外 边 距 
margin-top 设置 元 素 的 上 外 边 距 


CSS 外 边 距 属性 代码 如 下 所 示 。 


/* hl 元 素 的 各 个 边 上 设置 了 1/4 英寸 宽 的 空白 * / 


hl {margin : 0.25in;} 
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/¥ 
hl 元 素 的 四 个 边 分 别 定义 了 不 同 的 外 边 距 , 所 使 用 的 长 度 单位 是 像素 (px) : 
这 些 值 的 顺序 是 从 上 外 边 距 (top) 开始 围 着 元 素 顺 时 针 旋 转 的 : 

margin: top right bottom left 

*/ 

hl {margin : 10px Opx 15px 5px;} 

/* 为 margin 设置 一 个 百分比 数值 * / 

Pp {margin : 10%;} 


9. CSS 内 边 距 属性 (Padding) 


CSS 内 边 距 属性 如 表 2-6 所 示 。 
表 2-6 CSS 内 边 距 属 性 


属 性 描 述 
padding 在 一 个 声明 中 设置 所 有 内 边 距 属性 
padding-bottom 设置 元 素 的 下 内 边 距 
padding-left 设置 元 素 的 左 内 边 距 
padding-right 设置 元 素 的 右 内 边 距 
padding-top 设置 元 素 的 上 内 边 距 
CSS 内 边 距 属性 代码 如 下 所 示 。 


/* hl 元 素 的 各 边 都 有 10 像素 的 内 边 距 * / 

hl {padding: 10px;} 

/x 

按照 上 、 右 \ 下 、 左 的 顺序 分 别 设置 各 边 的 内 边 距 
各 边 均 可 以 使 用 不 同 的 单位 或 百分比 值 

*/ 

hl {padding: 10px 0.25em 2ex 20% ;} 


10. CSS 定位 属性 (Positioning) 


CSS 定位 属性 如 表 2-7 所 示 。 
表 2-7 CSS 定位 属性 


属 性 描 述 
bottom 设置 定位 元 素 下 外 边 距 边 界 与 其 包含 块 下 边界 之 间 的 偏 移 
clear 规定 元 素 的 哪 一 侧 不 允许 其 他 浮动 元 素 
clip 剪裁 绝对 定位 元 素 
Cursor 规定 要 显示 的 光标 的 类 型 (形状 ) 
display 规定 元 素 应 该 生成 的 框 的 类 型 
float 规定 框 是 否 应 该 浮动 
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续 表 
属 性 描 述 

left 设置 定位 元 素 左 外 边 距 边界 与 其 包含 块 左边 界 之 间 的 偏 移 
Overflow 规定 当 内 容 洲 出 元 素 框 时 发 生 的 事情 
position 规定 元 素 的 定位 类 型 
right 设置 定位 元 素 右 外 边 距 边界 与 其 包含 块 右边 界 之 间 的 偏 移 
top 设置 定位 元 素 的 上 外 边 距 边界 与 其 包含 块 上 边界 之 间 的 偏 移 
vertical-align 设置 元 素 的 垂直 对 齐 方式 
visibility 规定 元 素 是 否 可 见 
z-index 设置 元 素 的 堆 释 顺序 


1) CSS 相对 定位 


相对 定位 是 一 个 非常 容易 掌握 的 概念 。 如 果 对 一 个 元 素 进行 相对 定位 , 它 将 出 现在 
它 所 在 的 位 置 上 。 然 后 ,通过 设置 垂直 或 水 平 位 置 , 让 这 个 元 素 " 相 对 于 ” 它 的 起 点 移动 。 


如 果 将 “top” 设 置 为 “20 像素 
果 “left” 设 置 为 “30 像素 ”, 会 在 元 
果 如 图 2-8 所 示 。 


#box_ relative { 
position: relative; 


left: 30px; 
top: 20px; 
} 

一 一 一 一 一 一 一 一 一 一 
i 1 
11 1 
el 1 
11 1 
11 | 
Sn 框 1 1 
| 
1 
1 
1 包含 元 素 


(px)”, 那 么 框 将 在 原 位 置顶 部 下 面 20 像素 的 地 方 ; 如 
素 左边 创建 30 像素 的 空间 ,也 就 是 将 元 素 向 右 移动 , 效 


图 2-8 框 2 相对 定位 效果 


2) CSS 绝对 定位 
绝对 定位 使 元 素 的 位 置 与 文档 
定位 实际 上 被 看 作 普 通 流 定位 模型 


流 无 关 , 因 此 不 占据 空间 。 这 一 点 与 相对 定位 不 同 。 相 对 
的 一 部 分 ,因为 元 素 的 位 置 是 相对 于 它 在 普通 流 中 的 位 置 。 


普通 流 中 其 他 元 素 的 布局 就 像 绝 对 定位 的 元 素 不 存在 一 样 。 


#box_relative { 
position: absolute; 
left: 30px; 
top: 20px; 
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绝对 定位 的 效果 如 图 2-9 所 示 。 


i | | 1 
top:20px | 1 1 1 
1 1 1 1 
ee | ee 1 1 
1 
要 1 !__ 析 | 1 
I 1 i | 
| 1 
| LE 框 2 | 
1 
1 相对 定位 的 祖先 元 素 
图 2-9 框 2 绝对 定位 的 效果 
3) CSS 浮动 
如 图 2-10 所 示 , 当 把 框 1 向 右 浮 动 时 , 它 脱 离 文档 流 ,并 且 向 右 移动 ,直到 其 右边 缘 
碰 到 包含 框 的 右边 缘 。 
不 ? 动 的 | 杠 1 向 有 浮动 
1 二 | 
1 | 1 1 1 | 1 | mb | | 
2 1 
| 1 | 二 Lu 
1! 1 1 1 | 
1| 2! 1 1 | ! 
一 和 
| ' | 
L -有 RISE J 


图 2-10 框 1 向 右 浮动 的 效果 


如 图 2-11 所 示 , 当 框 1 向 左 浮动 时 , 它 脱离 文档 流 ,并 且 向 左 移动 ,直到 其 左边 缘 碰 
到 包含 框 的 左边 缘 。 因 为 它 不 再 处 于 文档 流 中 ,所 以 不 占据 空间 ,实际 上 覆盖 了 框 2, 使 


框 2 从 视图 中 消失 。 

框 1 向 左 浮动 所 有 3 个 框 向 左 浮动 

------------- 一 -一 -一 -一 一 一 一 一 
Te | 
11 《于 | 杠 ? 隐 藏 在 械 IT 面 | 11 人 | 人 | 1 人 | 
Le 1 枚 放 上 拓 2E= 将 1 
可 1 1 1 
加 | 人 1 
1L _ 3] a | 
1 长 二 1 
1 1 
1 1 
人 二 过 


图 2-11 框 1 向 左 浮动 的 效果 


如 果 把 所 有 3 个 框 都 向 左 移动 ,那么 框 1 向 左 浮动 ,直到 碰 到 包含 框 ; 另外 2 个 框 向 
左 浮动 ,直到 碰 到 前 一 个 浮动 框 。 


如 图 2-12 所 示 ,如 果 包 含 框 太 罕 ,无 法 容纳 水 平 排列 的 3 个 浮动 元 素 , 其 他 浮动 块 将 
向 下 移动 ,直到 有 足够 的 空间 。 如 果 浮 动 元 素 的 高 度 不 同 , 当 它们 向 下 移动 时 ,可 能 被 其 
他 浮动 元 素 “ 卡 住 ”。 


框 1 向 左 浮动 所 有 3 个 框 向 左 浮动 
| det 厅 | 和 二 
广 -一 广 = 二 二- 一 -rr 一 

I 1 了 本 1 | 
1 框 1 1 2 1 和 1 E21 1 
1 LL 2 Sa 
I 1 1 上 -机 I 1 
四 和 | Ef | — | 1 
1L--_ 构 ] ee LL--_ 权 3 

| 框 3 下 降 1 | 框 3 被 杠 !* 卡 住 了 ” | 
1 1 1 1 
二 Ce Ee 一 | 


图 2-12 框 3 浮动 块 被 “ 卡 住 了 ” 


11. CSS 表格 属性 (Table) 


CSS 表格 属性 如 表 2-8 所 示 。 
表 2-8 CSS 表格 属性 


属 性 描 述 
border-collapse 规定 是 否 合并 表格 边框 
border-spacing 规定 相 邻 单元 格 边框 之 间 的 距离 
caption-side 规定 表格 标题 的 位 置 


empty-cells 


规定 是 否 显示 表格 中 空 单 元 格 上 的 边框 和 背景 


table-layout 


CSS 表格 属性 代码 如 下 。 


/* 合并 表格 边框 ( 细 边 框 ) * / 
table 
{ 


border - collapse:collapse; 


} 


table, td, th 
{ 
border:1px solid black; 


设置 用 于 表格 的 布局 算法 


</tr> 
<tr> 
<td> 
1 行 1 列 
</td> 
<td> 
1 行 2 列 
</td> 
</tr> 
<tr> 
<td> 
1 行 1 列 
</td> 
<td> 
2 行 2 列 
</td> 
</tr> 
</table> 
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这 段 代 码 的 运行 效果 如 下 所 示 : 


列 头 1 


列 头 2 


1 行 1 列 


1 行 2 列 


1 行 1 列 


12. CSS 文本 属性 (Text) 


CSS 文本 属性 如 表 2-9 所 示 。 


2 行 2 列 


表 2-9 CSS 文本 属性 


属 性 描 述 
color 设置 文本 的 颜色 
direction 规定 文本 的 方向 /书写 方向 
letter-spacing 设置 字符 间距 
line-height 设置 行 高 
text-align 规定 文本 的 水 平 对 齐 方式 
text-decoration 规定 添加 到 文本 的 装饰 效果 
text-indent 规定 文本 块 首 行 的 缩 进 
text-shadow 规定 添加 到 文本 的 阴影 效果 
text-transform 控制 文本 的 大 小 写 
white-space 规定 如 何 处 理 元 素 中 的 空白 
word-spacing 设置 单词 间距 


CSS 文 本 属性 代码 如 下 。 


/* 文 字 缩 进 * / 
p {text - indent: 5em;} 


/* 没 有 下 划 线 的 超 链接 * / 

a {text - decoration: none;} 

下 面 用 CSS 来 定义 实例 2-2 的 页 面 显示 效果 。 

【实例 2-3】 在 Dreamweaver CS6 打开 实例 2-2, 然 后 新 建 一 个 CSS 文档 创建 一 个 外 
部 样式 表 , 如 图 2-13 所 示 。 


加 


EE 


网 者 网 属 布 局 


国 机 村 p 的 
[a 


国 Ka 


民生 本 式 表 《css) 文档 


EE 


一 


部 助 G | 商 寺 天 数 (E). ， 


图 2-13 ”新建 CSS 文档 
在 此 文档 中 编辑 下 列 代码 : 


body { 
font - family:Arial, Helvetica, sans— serif; 
margin:0px auto; 
max — width:700px; 
border: solid 0; 
border - color: #999; 
background - color:#ccc; 
padding:5px; 

} 

hl, h2, 3 { 
margin:0px; 
padding:0px; 


font — size:36px; 


font — size:24px; 
text - align:center; 


font - size: 18px; 
text — align: center; 
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color: #0099FF; 
} 
header { 
background — color: # fff; 
display:block; 
color: #666; 
text — align:center; 
border - bottom:2px solid # FFF; 
} 
header hl{ 
margin:0px; 
padding:5px; 
font — size:30px; 
} 
header p{ 
margin:0px; 
padding:0; 
font — size:16px; 
} 
nav { 
text ~ align: left; 
display:block; 
background - color: # 0099FF; 
height :30px; 
border - bottom:1px solid #333; 
} 
nav ul { 
padding:0; 
margin:0; 
list— style:none; 
} 
nav ul 1i{ 
float:left; 
margin — left:20px; 


} 


nav ul 1i:hover{ 
background - color: #666; 


} 

nav a:link, nav a:visited { 
display:block; 
text — decoration:none; 
font - weight :bold; 
margin:5px; 
color: # ed4e4ed; 

} 

nav a:hover { 
Color: # FFFFFF; 
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nav h3 { 
margin:15px; 
Color: #fff; 

} 

#container { 
background — color: # fff; 
text ~ align: left; 

} 

section { 
display:block; 
width:75%; 
float: left; 

} 

article { 
text — align: left; 
display:block; 
margin:10px; 
padding:10px; 
border:1px solid #0099FF; 

} 

article header { 
text ~ align: left; 
border - bottom: 1px dashed #0099FF; 
padding: 5px; 

} 

article header hl{ 
font - size:18px; 
line— height:25px; 
padding:0; 

} 

article footer { 
text - align: left; 
padding:5px; 

} 

aside { 
text — align: left; 
display:block; 
width:25%; 
float:left; 

} 

aside article{ 
background: # e4e4e4; 
border:1px solid #ccc; 

} 

aside hl { 
margin:10px; 
color: #666; 
font — size:18px; 

} 


asidep { 
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margin:10px; 
color:#666; 
line— height:22px; 


} 

footer { 
display:block; 
clear:both; 
border - top:1px solid #0099FF; 
color: #666; 
text ~- align:center; 
padding:10px; 

} 

footerp{ 
font — size:14px; 
color: #666; 
margin:0; 
padding:0; 

} 

p{ 
font - size:14px; 

} 

af 
color: # 0099FF; 

} 

a:hover { 


text - decoration: underline; 
cursor: pointer; 


} 


把 上 述 CSS 文 档 保 存在 和 HTML 文档 相同 的 文件 夹 下 ,并 为 其 命名 ,如 2-2. css。 
接 下 来 ,在 实例 2-2 的 HTML 文档 源 代码 的 二 head 盖 二 /head> 中 加 入 下 述 代码 ,用 来 指 
定 样式 表 的 链接 ,如 图 2-14 所 示 。 


< link rel = 'stylesheet' type = "text/css" href = "2 一 2.css"> 


E 儿 二 > | 


小 米 的 博客 


cbeader 


> 
<hl> 间 的 入 窜 </hl> 


<li>ca hret-"4r> 博 文 </ay</ 
> 


S126 pretty 


图 2-14 在 源 代码 中 加 入 CSS 文 档 的 应 用 
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再 用 浏览 器 预览 ,发 现 页 面 显示 生动 .美观 了 很 多 ,如 图 2-15 所 示 。 


| 对 于 前 请 设计 全 说 ， 昌 然 CSS3 不 全 晰 罗技 术 ， 但 它 吉 昌 语 了 一 亲 直 妙 
| BOO. 


| 而 5 


厂 权 所 有 2015 


图 2-15 加 入 CSS 后 ,实例 2-2 的 显示 效果 
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CSS3 是 CSS 技术 的 升级 版 本 。CSS3 语言 开发 朝 着 模块 化 发 展 。 以 前 的 规范 作为 
一 个 模块 实在 太 庞 大 ,而 且 比 较 复杂 ,所 以 把 它 分 解 为 一 些小 的 模块 ,更 多 新 的 模块 也 被 
加 入 进来 ,包括 盒子 模型 .列表 模块 超 链 接 方式 、 语 言 模块 背景 和 边框 、 文 字 特 效 、 多 栏 
布局 等 。 

相 比 上 个 版 本 CSS2. 1 来 说 ,CSS3 有 如 下 比较 重要 的 改进 。 


1. 边框 


(1) bordercolor: 控 制 边 框 颜色 ,并 且 有 了 更 大 的 灵活 性 ,可 以 产生 渐变 效果 。 
(2) border-image: 控 制 边框 图 像 。 

(3) border-corner-image: 控 制 边框 边 角 的 图 像 。 

(4) border-radius :产生 类 似 圆 角 矩形 的 效果 。 


2. 背景 


(1) background-origin: 决 定 背 景 在 盒 模型 中 的 初始 位 置 ,提供 了 3 个 值 , 即 border、 
padding 和 content。 

(2) border: 控 制 背景 起 始 于 左上 角 的 边框 。 

(3) padding :控制 背景 起 始 于 左上 角 的 留 白 。 

(4) content: 控 制 背景 起 始 于 左上 角 的 内 容 。 

(5) background-clip: 决 定 边框 是 否 覆 盖 背 景 ( 默 认 是 不 覆盖 ) ,提供 了 两 个 值 , 即 
border 和 padding。 其 中 ,border 会 覆盖 背景 ,而 padding 不 会 覆盖 背景 。 

(6) background-size: 指 定 背景 大 小 ,以 像素 或 百分比 显示 。 当 指定 为 百分比 时 ,大 
小 由 所 在 区 域 的 宽度 .高度 以 及 background-origin 的 位 置 决定 。 
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(7) multiple backgrounds: 多 重 背 景 图 像 , 可 以 把 不 同 背 景 图 像 放 到 一 个 块 元 素 里 。 


3. 文字 效果 


(1) text-shadow :文字 投影 。 

(2) text-overflow: 当 文 字 滋 出 时 ,用 *…” 提 示 , 包 括 ellipsis、 clip、 ellipsis-word、 
inherit。 前 两 个 CSS2 就 有 了 ,还 是 部 分 支持 。ellipsis-word 可 以 省 略 最 后 一 个 单词 ,对 
中 文 意义 不 大 ; inherit 可 以 继承 父 级 元 素 。 


4. 颜色 


除了 支持 RGB 颜色 外 ,还 支持 HSL( 色 相 、 饱 和 度 、 亮 度 )。 以 前 一 般 都 是 作 图 的 时 
候 使 用 HSL 色谱 ,但 会 包括 更 多 的 颜色 。H 用 度 表 示 ,S 和 L 用 百分比 表示 ,比如 HSL 
(0,100% ,50%), 

(1) HSLA colors: 加 了 个 不 透明 度 (Apacity), 用 0 一 1 的 数 表示 ,比如 HSLA (0， 
100% ,50% ,0.2) 。 

(2) opacity: 直 接 控制 不 透明 度 , 用 0 一 1 的 数 来 表示 。 

(3) RGBA colors: 和 HSLA colors 类 似 , 加 了 个 不 透明 度 。 一 直 以 来 ,浏览 器 无 法 
实现 单纯 的 颜色 透明 ,每 次 使 用 Alpha 后 ,会 把 透明 的 属性 继承 到 子 节点 上 。 换 句 话 
说 ,很 难 实现 背景 颜色 透明 而 文字 不 透明 的 效果 ,直到 RGBA 颜色 出 现 ,这 一 切 成 为 
现实 。 

实现 这 样 的 效果 非常 简单 ,设置 颜色 的 时 候 使 用 标准 的 rgba() 单 位 即 可 。 例 如 rgba 
(255,0,0,0.4), 就 出 现 一 个 红色 同时 拥有 Alpha 透明 为 0. 4 的 颜色 。 

经 过 测试 ,Firefox 3.0、Safari 3. 2 .Opera 10 都 支持 RGBA 单位 。 


5. 动画 属性 


动画 属性 包括 变形 (transform) ,转换 (transition) 和 动画 (animation)。 

transform: 包 括 旋转 (rotate) .扭曲 (skew)、 缩 放 (scale) 和 移动 (translate) 以 及 矩阵 
变形 (matrix) 等 参数 。 

transition 主要 包含 4 个 属性 值 : 执行 变换 的 属性 (transition-property) 变换 延续 的 
时 间 (transition-duration) \ 在 延续 时 间 段 变换 的 速率 变化 (transition-timing-function)、 
变换 延迟 时 间 (transition-delay) 。 


6. 用 户 界面 


resize: 可 以 由 用 户 自己 调整 div 的 大 小 ,设置 horizontal( 水 平 ) 或 vertical( 垂 直 ) 参 
数 ; 或 者 both( 同 时 ) 调 整 。 如 果 加 上 max-width 或 min-width, 还 可 以 防止 破坏 布局 。 


7. 选择 器 


CSS3 增加 了 更 多 CSS 选择 器 ,实现 更 简单 ,但 是 更 强大 的 功能 ,比如 nth-child() 等 。 
Attribute selectors: 在 属性 中 可 以 加 入 通配符 :包括 ^、$ 和 =* 。 
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2.3 网 站 规划 与 设计 


个 人 主页 是 指 因 特 网 (Internet) 上 一 块 固定 的 面向 全 世界 发 布 消 息 的 地 方 ,通常 包括 
主页 和 其 他 具有 超 链接 文件 的 页 面 。 个 人 主页 是 指 个 人 因 某 种 兴趣 .拥有 某 种 专业 技术 、 
提供 某 种 服务 或 是 为 了 把 自己 的 作品 .商品 展示 、 销 售 而 制作 的 具有 独立 空间 域名 的 
网 站 。 

单 页 网 站 作为 一 个 流行 趋势 ,已 有 一 段 时 间 了 ,但 其 受 欢迎 的 程度 没有 任何 减少 。 这 
种 页 面 设 计 方 法 不 适用 于 每 个 项 目 , 但 有 时 它 是 合适 的 ,是 有 意义 的 。 例 如 , 若 没有 很 多 
内 容 , 而 且 这些 内 容 在 未 来 不 会 增长 很 多 ,将 其 制作 成 单 页 网 站 (Single Page Websites) 
的 形式 是 很 好 的 选择 。 本 章 设 计 的 个 人 主页 是 一 个 类 似 于 “个 人 简历 ”的 网 站 ,为 了 方便 
发 布 ,将 其 设计 为 单 页 的 ,包括 的 模块 如 表 2-10 所 示 。 


表 2-10 网 站 模块 
序 号 模块 名 称 说 明 
1 导航 一 组 超 链接 
2 个 人 简介 图 文 
3 个 人 履历 表格 
4 个 人 荣誉 表格 
5 照片 集 图 集 
6 作品 集 图 集 
7 与 我 联系 图 片 十 文字 
2.4 导航 模块 
1. 新 建 网 页 
使 用 网 页 设计 工具 ,新 建 一 个 站 点 。 在 站 点 中 ,添加 一 个 名 为 index. htm 的 网 页 , 按 
如 下 内 容 编 辑 网 页 代码 : 
<!DOCTYPE html > 
< htm]l > 
<head> 
<title> 个 人 主页 </title> 
</head> 
<body> 


<div id= "nav"> 
<hl>x x x 的 个 人 简介 </hl > 
</div> 
</body> 
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</html > 


代码 说 明 如 下 : 

二 ! DOCTYPE html 写 声明 当前 网 页 是 HTML5 版 本 。 为 了 说 明文 档 使 用 的 超 文 
本 标记 语言 标准 ,所 有 超 文本 标记 语言 文档 应 该 以 “文件 类 型 声明 ”( 外 语 全 称 加 缩写 
去 ! DOCTYPE>) 开 头 ,引用 一 个 文件 类 型 描述 ,或 者 在 必要 情况 下 自 定义 一 个 文件 类 
型 描述 。 

二 html> 与 二 /html 二 之 间 的 文本 描述 网 页 ,说 明 该 文件 是 用 超 文 本 标记 语言 描述 
的 。 二 html 二 是 文件 的 开头 .二 /html 二 表示 该 文件 的 结尾 ,它们 是 超 文本 标记 语言 文件 
的 开始 标记 和 结尾 标记 。 

去 head> 与 二 /head> 之 间 的 内 容 表 示 网 页 头 部 信息 。 头 部 中 包含 的 标记 是 页 面 的 
标题 .关键 字 .说 明 等 内 容 , 它 本 身 不 作为 内 容 显示 ,但 影响 网 页 显示 的 效果 。 

<title> 与 二 /title 二 之 间 的 文本 是 网 页 标题 ,出 现在 浏览 器 的 标题 栏 。 如 果 网 页 被 
收藏 ,网 页 标题 被 用 作 书 签 和 收藏 清单 的 项 目 名 称 。 

一 body 二 与 二 /body 二 之 间 的 文本 是 可 见 的 页 面 内容 。 

二 div id 一 "nav" 之 表示 这 个 div 元 素 的 id 为 navCnavigation ,导航 )。 在 网 页 设计 中 ， 
一 般 用 nav 表示 导航 元 素 。 志 div 之 元素 是 块 级 元 素 (独占 一 整 行 ,浏览 器 会 在 其 前 后 自 
动 换行 ), 它 是 HTML 中 最 常用 的 容器 ,用 于 组 合 多 种 HTML 元 素 。 

二 hl 二 与 /hl 二 之 间 的 文本 被 显示 为 标题 。 在 HTML 中 ,专用 于 显示 标题 
(Heading) 的 元 素 通过 一 hl 之 一 一 h6 二 标签 定义 ,hl 表示 最 大 级 别 的 标题 ,h6 则 最 小 。 


2. 添加 各 个 模块 的 内 容 区 域 


在 网 页 中 ,除了 导航 区 域外 ,还 需要 其 他 内 容 区 域 。 可 以 先 将 这 些 区 域 的 框架 添加 到 
网 页 中 ,以 便 网 页 调试 。 将 如 下 代码 添加 到 二 div id 一 "nav" 二 …< 一 /div 二 之 后 : 


<div id= "infol"> 

吉 == 相 太夫 介 二 > 
</div> 
<div id= "info2"> 

<! -- 个 人 履历 --> 
</div> 
<div id= "info3"> 

<! -一 个 人 荣誉 -一 > 
</div> 
<div id= "info4"> 

<! -一 照片 集 -一 > 
</div> 
<div id= "info5"> 

<! -作品 集 -一 > 
</div> 
<div id= "info6"> 

<! 一- 与 我 联系 -> 


</div> 
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<! El 二 表示 一 段 注释 ,不 会 显示 在 浏览 器 中 。 使 用 注释 对 代码 进行 解 
释 , 有 助 于 以 后 编辑 代码 。 这 在 编写 大 量 代码 时 尤其 有 用 。 


3. 制作 导航 超 链 接 
在 二 div id 一 "nav" 之 一 /div 之 中 的 hl 元 素 后 ,添加 如 下 超 链接 代码 : 


<a href = "# info6"> 与 我 联系 </a> 

<a href ="# info5"> 作 品 </a> 

<a href ="# info4"> 工 作 经 历 </a> 

<a href ="# info3"> 专 长 </a> 

<a href ="# info2"> 教 育 经 历 </a> 

<a href ="#infol"> 简 介 </a> 

代码 说 明 如 下 : 

二 a 二 标签 是 指 超 链接 。 点 击 超 链 接 , 可 以 从 一 张 页 面 跳 转 到 另 一 张 页 面 。 超 链接 可 
以 是 一 个 字 一 个 词 ,或 者 一 组 词 ,也 可 以 是 一 幅 图 像 ,点 击 这 些 内 容 跳 转 到 新 的 文档 或 者 
当前 文档 中 的 某 个 部 分 。 默 认 情 况 下 , 当 把 鼠标 指针 移动 到 网 页 中 的 某 个 链接 上 时 ,箭头 
变 为 一 只 小 手 。 

href 是 a 元 素 最 重要 的 一 个 属性 ,用 于 表示 连接 的 目标 地 址 。href 的 属性 值 可 以 是 
一 个 网 址 ,如 href 二 "http://www. qq. com"; 也 可 以 是 一 个 站 内 地 址 ,如 href 一 "index. 
htm"; 还 可 以 是 指向 文档 内 某 个 元 素 的 “ 锚 ”, 如 href 一 "#info6"。 很 显然 ,在 当前 情况 
下 , 超 链接 就 是 指向 id 一 info6 的 这 个 元 素 ( 注 意 ,href 的 属性 值 中 , # 表示 id) 。 


4. 设置 网 页 元 素 样式 


当前 情况 下 ,网 页 十 分 单调 ,也 没有 内 容 。 下 面 使 用 CSS 设置 网 页 元 素 的 样式 。CSS 
指 层 释 样式 表 (Cascading Style Sheets) ,用 于 定义 如 何 显 示 HTML 元 素 。CSS 通常 在 以 
下 4 个 位 置 定义 : 
(1) 浏览 器 缺 省 设置 ,各 个 浏览 器 有 所 不 同 , 无 法 直接 修改 。 
(2) 外 部 样式 表 , 通 常 是 一 个 后 组 名 为 . css 的 文本 文件 。 
(3) 内 部 样式 表 , 通 常 位 于 一 head> 内 部 ,格式 为 天 style>…< 到 /style>。 
(4) 内 联 样式 ,在 HTML 元 素 内 部 ,以 style 作为 属性 名 称 ,例如 二 div style 
="color:red"></div>。 
在 本 项 目 中 ,使 用 第 (3) 种 (内 部 样式 表 ) 方 式 定义 。 在 二 head 记 内 部 添加 如 下 CSS 
代码 : 
< style type = "text/css"> 
body { 
margin:0px; 
padding:0px; 
font — size:14px; 
} 


#nav { 
height :60px; 
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background — color: #fff; 
border - bottom:1px solid #¢ccc; 
} 
#nav>hl{ 
font — size:2em; 
font — weight :bold; 
padding:0px 10px; 
margin:0px; 
float:left; 
line — height :60px; 
} 
#nav>af{ 
font — size:1.2em; 
float:right; 
display:block; 
text — decoration:none; 
color: #666; 
padding:0px 20px; 
margin:10px; 
border - top: 4px solid transparent; 
line — height:40px; 
} 
#nav > a:hover { 
border - top:4px #639 solid; 
} 
.Container { 
padding:20px; 
float :none; 
clear: both; 
} 
.container > h2 { 
font - size:1. 6em; 
font - weight :bold; 
text — align: left; 
Padding:10px Opx; 
} 
.bg 一 primary { 
background - color: # 639; 
Color: #fff; 
} 
.bg 一 default { 
background - color: # fff; 
color: #000; 
} 
.bg— info { 
background - color: # eee; 
color: #000; 
} 
</style> 


代码 说 明 如 下 : 

body{…} 表 示 设 置 body 元 素 的 样式 。 因 为 body 元 素 是 整个 网 页 可 见 区 域 的 根 元 
素 , 所 以 把 body 元 素 的 样式 看 成 整个 网 页 的 通用 样式 。 在 CSS 中 ,以 元 素 名 称 命名 的 样 
式 称 为 元 素 选 择 器 (又 称 为 类 型 选择 器 ) 。 该 样式 将 被 应 用 到 所 有 指定 名 称 的 元 素 。 

# nav {…} 表 示 设 置 id 值 为 nav 的 元 素 样式 。CSS 中 ,以 元 素 id 命名 的 样式 称 为 ID 
选择 器 。 该 样式 将 被 应 用 到 某 一 个 具体 的 元 素 上 。 

#nav 祖 hl{} 表 示 设 置 id 值 为 nav 的 元 素 的 hl 子 元 素 的 样式 。CSS 中 ,用 “之 ?表示 
元 素 的 父子 关系 , 称 为 子 元 素 选择 器 。 

. container{} 表 示 定 义 一 个 名 为 container 的 CSS 样式 类 , 称 为 类 选择 器 。 为 了 将 类 
选择 器 的 样式 与 元 素 关联 ,必须 将 类 选择 器 的 名 称 指定 到 元 素 的 class 属性 值 中 , 例 
如 二 div class 一 "container "二 … 一 /div 二 。 

为 了 将 上 述 CSS 代码 中 定义 的 样式 应 用 元 素 , 需 要 调整 元 素 的 HTML 代码 。 调 整 
后 ,index. htm 的 代码 如 下 所 示 : 


<!DOCTYPE html > 
<html> 
<head> 
<title> 
个 人 主页 
</title> 
< style type = "text/css"> 
body { 
margin: 0px; 
padding: Opx; 
font 一 size:14px; 
} 
#nav { 
height :60px; 
background — color: # fff; 
border - bottom:1px solid #¢ccc; 
} 
井 nav> hl { 
font ~— size:2em; 
font — weight :bold; 
padding:0px 10px; 
margin:O0px; 
float:left; 
line— height:60px; 
} 
#nav>a{ 
font — size:1.2em; 
float:right; 
display:block; 
text — decoration:none; 
color: #666; 
padding: 0px 20px; 
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margin:10px; 
border — top:4px solid #fff; 
line— height:40px; 


} 

井 nav> a:hover { 
border 一 top:4px #639 solid; 

} 

.container { 
padding:20px; 
float:none; 
clear :both; 

} 

.container > h2 { 
font — size:1.6em; 
font — weight :bold; 
text — align: left; 
padding:10px Opx; 

} 

.bg 一 primary { 
background — color: #639; 
color: #fff; 

} 

.bg— default { 
background — color: # fff; 
color: #000; 

} 

.bg— info { 
background — color: # eee; 
color: #000; 

} 

</style> 

</head> 


<body> 
<div id= "nav"> 

<hl > 
x x x 的 个 人 简介 

</hl > 

<a href = "# info6"> 
与 我 联系 

</a> 

<a href = "# info5"> 
作品 集 

</a> 

<a href ="# info4"> 
照片 集 

</a> 

<a href = "# info3"> 
个 人 荣誉 
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</a> 
<a href = "# info2"> 
个 人 履历 
</a> 
<a href ="# infol"> 
个 人 简介 
</a> 
</div> 
<div id="infol" class = "container bg— primary"> 
<h2> 
About me 
</h2> 
</div> 
<div id= "info2" class = "container bg — info"> 
<h2> 
教育 及 培训 经 历 
</h2> 
<h2> 
工作 经 历 
</h2> 
</div> 
<div id= "info3" class = "container bg — default"> 
<h2> 
个 人 荣誉 
</h2 > 
</div> 
<div id="info4" class = "container bg — info"> 
<h2> 
照片 集 
</h2> 
</div> 
<div id="info5" class = "container bg — default"> 
<h2> 
作品 集 
</h2> 
</div> 
<div id= "info6" class = "container bg — primary"> 
<h2> 
与 我 联系 
</h2 > 
</div> 
</body > 


</html > 


2.5 个 人 简介 模块 


1. 准备 网 页 素材 
本 模块 中 ,需要 的 素材 为 一 张 个 人 照片 (jpg 格式 ) 以 及 一 段 个 人 简介 的 文字 。 要 注 
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意 的 是 ,由 于 本 模块 的 背景 颜色 为 深 色 , 所 以 请 选择 浅 色调 的 照片 ,以 增加 对 比 度 。 

在 站 点 根 目录 下 创建 名 为 “img” 的 子 目录 ,然后 将 照片 命名 为 headimg. jpg, 并 复制 
到 “img” 中 。 由 于 网 页 中 会 用 到 很 多 图 片 资源 ,所 以 把 所 有 的 图 片 资 源 统一 放 在 一 个 文 
件 夹 中 比较 容易 管理 。 


2. 添加 网 页 内 容 


将 如 下 HTML 代码 添加 到 二 div id= "infol" 二 二 /div 之 元 素 内 部 


<div id= "infol" class = "container bg — primary"> 
< img class = "headimg" src = "img/headimg. jpg" /> 
<h2> 
About me 
</h2> 
<p class= "text"> 
你 好 ,欢迎 访问 我 的 个 人 网 站 ,我 是 x x x ,是 一 名 网 页 设计 师 , 主要 从 事 企 业 网 站 建设 
及 淘宝 阿里 巴巴 店铺 装修 ,网 页 设计 是 我 的 工作 也 是 我 的 兴趣 爱好 ,希望 以 后 继续 努力 , 做 更 好 的 
网 站 ,呵呵 ! 
</p> 
<pclass= "text"> 
本 人 性 格 开朗 ,乐于 助人 ,无 论 是 在 生活 中 还 是 在 工作 中 , 人缘 都 很 好 ,我 这 样 的 性 格 有 
助 于 加 强 整 个 工作 团队 的 凝聚 力 。 对 待 工 作 , 我 一 直 都 保持 着 一 个 比较 认真 的 态度 ,我 的 工作 能 
力 很 强 ,在 处 理 问 题 的 过 程 中 ,能 力 一 直 是 很 高 的 ,对 于 专业 知识 的 掌握 很 好 , 所 以 能 够 胜任 这 项 
工作 。 在 工作 中 ,我 一 直 都 具备 较 强 的 责任 心 ,创意 丰富 的 我 ,相信 一 定 能 够 在 IT 行 业 中 发 光 发 
热 。 在 工作 中 ,处 理 问题 的 能 力 很 强 , 丰富 的 工作 经 验 , 也 就 能 够 看 出 ,我 在 工作 中 不 俗 的 能 力 了 。 
</p> 
</div> 


代码 说 明 如 下 : 

< 一 img class 一 "headimg"”src 一 "img/headimg. jpg" /二 是 一 个 图 片 元 素 , 图 片 的 资源 
(src) 为 headimg.jpg。 因 为 之 前 把 图 片 放 在 了 img 子 目录 下 ,所 以 在 填写 图 片 src 属性 
值 时 ,需要 带 上 路 径 ,否则 浏览 器 将 无 法 找到 该 图 片 。 值 得 注意 的 是 ,这 个 img 元 素 有 一 
个 class(CSS 类 名 称 )。 这 个 class 将 在 下 面 一 步 设计 。 

去 h2 之 过 /h2 二 表示 当前 模块 的 二 级 标题 。 因 为 在 导航 模块 中 使 用 了 hl 作为 网 页 
的 一 级 标题 ,所 以 这 里 使 用 h2 作为 二 级 标题 。 在 当前 的 CSS 定义 (. container 二 h2 子 元 
素 选 择 器 ) 中 ,h2 是 container 类 之 下 的 ,所 以 如 果 要 使 h2 的 样式 起 效 ,HTML 的 格式 必 


须 是 如 下 形式 : 
<xxx class =" container"> 
<h2></h2> 
</xxx> 
二 p class 一 "text" 之 一 /p 二 表示 当前 模块 的 正文 部 分 。 与 title 类似,text 也 是 在 
container 类 之 下 的 。 


在 当前 的 CSS 定义 (. container 二 . text 子 元 素 选 择 器 ) 中 ,text 类 是 container 类 之 下 
的 ,所 以 如 果 要 使 text 类 的 样式 起 效 .HTML 的 格式 必须 是 如 下 形式 : 
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<xxx class = " container"> 
< YYY class = "text"></YYY> 
</xxx > 


3. 添加 网 页 样式 
将 如 下 CSS 代码 添加 到 网 页 头 的 二 style> 


style 过 元 素 中 : 


.container > .headimg { 
margin: 10px auto; 
width: 200px; 
height: 200px; 
display: block; 

} 

.container > .text { 
font — size:1enm; 
text — align: left; 
line— height:1.5em; 


4. 效果 图 
网 页 中 的 显示 效果 如 图 2-16 所 示 。 


XXX 的 个 人 | 
已 | 口 fileV/D:/ 快 盘 / 网 页 设计 教材 /个 人 简历 /个 人 简历 .htm 
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About me 


迎 访问 我 
我 的 工作 也 是 : 


图 2-16 个 人 简介 模块 
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2.6 个 人 履历 模块 


1. 准备 网 页 素材 


在 本 模块 ,需要 将 个 人 履历 添加 到 网 页 中 。 作 为 在 校 学 生 ,履历 一 般 分 为 教育 经 历 和 
工作 经 历 。 

教育 经 历 可 以 从 小 学 开始 记录 ,一 直到 当前 ; 如 果 中 间 有 参加 培训 班 的 经 历 ,应 该 尽 
量 添加 其 中 ,所 需 信 息 包括 学 校 及 培训 机 构 ,起 旋 时 间 、 主 修 专业 /技能 ,学 历 及 是 否 毕 业 / 
结业 、 佐 证 人 及 电话 。 

工作 经 历 方面 的 内 容 可 能 比较 少 , 主 要 包括 企业 实习 、 社 会 实践 等 ,所 需 信息 包括 就 
职 企业 、 起 旋 时 间 、 职 位 、 薪 酬 离 职 原 因 、 佐 证 人 及 电话 。 


2. 添加 网 页 内 容 
将 如 下 HTML 代码 添加 到 二 div id= "info2" 盖 一 /div 过 元素 内 部 


<div id= "info2" class = "container bg — info"> 
<h2> 
教育 及 培训 经 历 
</h2> 
<table class = "table"> 
<tr> 
<th> 
学 校 及 培训 机 构 
</th> 
<th> 
起 旋 时 间 
</th> 
<th> 
主 修 专业 /技能 
</th> 
<th> 
学 历 及 是 否 毕业 /结业 
</th> 
<th> 
佐证 人 及 电话 
</th> 
</tr> 
<tr> 
<td> 
x x 小 学 
</td> 
<td> 
2004 年 9 月 至 2010 年 7 月 
</td> 
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x x x12345678901 
</td> 
</tr> 
<tr> 
<td> 
x x 初中 
</td> 
<td> 
2010 年 9 月 至 2013 年 7 月 
</td> 
<td> 
</td> 
<td> 
初中 
</td> 
<td> 
x x x12345678901 
</td> 
</tr> 
<tr> 
<td> 
x x 高 中 
</td> 
<td> 
2013 年 9 月 至 2016 年 7 月 
</td> 
<td> 
</td> 
<td> 
高 中 
</td> 
<td> 
x x X12345678901 
</td> 
</tr> 
<tr> 
<td> 
x x 大 学 
</td> 
<td> 
2016 年 9 月 至 今 
</td> 
<td> 
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软件 技术 
</td> 
<td> 
本 科 
</td> 
<td> 
x x x12345678901 
</td> 
</tr> 
</table> 
<h2 > 
工作 经 历 
</h2 > 
<table class = "table"> 
<tr> 
<th> 
就 职 企业 
</th> 
<th> 
起 旋 时 间 
</th> 
<th> 
职位 
</th> 
<th> 
薪酬 
</th> 
<th> 
离职 原因 
</th> 
<th> 
佐证 人 及 电话 
</th> 
</tr> 
<tr> 
<td> 
x x 有限 公司 
</td> 
<td> 
2014 年 7 月 至 2016 年 8 月 
</td> 
<td> 
网 站 编辑 (实习 ) 
</td> 
<td> 
3000 
</td> 
<td> 


暑期 实习 
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</td> 
<td> 
x x x12345678901 
</td> 
</tr> 
<tr> 
<td> 
x x 有 限 公 司 
</td> 
<td> 
2014 年 7 月 至 2016 年 8 月 
</td> 
<td> 
网 站 编辑 (实习 ) 
</td> 
<td> 
3000 
</td> 
<td> 
暑期 实习 
</td> 
<td> 
x x X12345678901 
</td> 
</tr> 
<tr> 
<td> 
x x 有 限 公 司 
</td> 
<td> 
2014 年 7 月 至 2016 年 8 月 
</td> 
<td> 
网 站 编辑 (实习 ) 
</td> 
<td> 
3000 
</td> 
<td> 
暑期 实习 
</td> 
<td> 
x x x12345678901 
</td> 
</tr> 
</table> 
</div> 


代码 说 明 如 下 : 
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二 table class 二 "table" 记 过 /table 二 是 一 个 表格 元 素 。table 是 一 个 复合 元 素 ,一 般 包 
含 tr( 行 ) ,th( 标 题 单元 格 ) .td( 普 通 单元 格 ) 等 元 素 。table 的 基本 格式 如 下 所 示 : 


<table> 
冯 玫 下 于 
<td> 
第 1 行 第 1 列 
</td> 
<td> 
第 1 行 第 2 列 
</td> 
</tr> 
<tr> 
<td> 
第 2 行 第 1 列 
</td> 
<td> 
第 2 行 第 2 列 
</td> 
</tr> 
</table> 


在 网 页 中 ,为 当前 表格 设置 了 class 王 "table" 。 这 个 table 类 将 在 下 一 步 设计 。 
3. 添加 网 页 样式 
将 如 下 CSS 代码 添加 到 网 页 头 的 一 style 之 二 /style 盖 元 素 中 ， 


.table { 
border: 1px solid# 000; 
border — collapse: collapse; 
width: 100 $% ; 
margin: 10px; 

} 

.table td { 
border: 1px solid#000; 
border — collapse: collapse; 
padding: 10px; 
font — size: 1.2em; 

} 

.table th { 
border: 1px solid#000; 
border — collapse: collapse; 
font — weight: bold; 
text — align: center; 
padding: 10px; 

} 


代码 说 明 如 下 : 
. table td 是 后 代 选 择 器 ,含义 是 : td 元 素 必须 出 现在 class 一 ". table" 元 素 中 (只 要 是 
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后 代 元 素 ,不 一 定 是 子 元 素 ) 。td 元 素 是 table 元 素 的 第 2 层 子 元 素 (第 1 层 是 tr) ,如 果 
用 子 元 素 选择 器 ,应 该 写 为 . table>tr>td 的 格式 ,这 样 不 是 很 方便 ,所 以 采用 后 代 选 择 器 
的 方式 。. table th 也 同 理 。 

border: 1px solid#000; 表 示 边 框 为 1 像素 、 实 线 、 黑 色 。 这 个 CSS 属性 在 上 述 3 个 
CSS 选择 器 中 都 有 定义 ,所 以 表格 以 及 单元 格 都 有 边框 。 为 了 避免 边框 重复 造成 “ 粗 边 
框 ”, 设 置 border-collapse: collapse; 属 性 ,表示 边框 合并 ,就 有 了 “ 细 边 框 ” 的 效果 。 


4. 效果 图 


个 人 履历 模块 效果 图 如 图 2-17 所 示 。 


教育 及 培训 经 历 


2004 年 9 月 至 2010 年 7 月 小 学 XXX 12345678901 
2013 年 9 月 至 2016 年 ?月 XXX 12345678901 


图 2-17 个 人 履历 模块 


2.7 个 人 荣誉 模块 


1. 准备 网 页 素材 


在 本 模块 ,需要 将 个 人 荣誉 添加 到 网 页 中 ,所 需 信息 包括 时 间 、 荣 誉 名 称 、 授 予 单 位 、 
级 别 。 


2. 添加 网 页 内 容 


将 如 下 HTML 代码 添加 到 一 div id= "info3" 盖 一 /div 之 元 素 内 部 ， 


< div id= "info3" class = "container bg— default"> 
<h2> 
个 人 荣誉 
</h2> 
<table class = "table"> 
<tr> 
<th> 
时 间 
</th> 
<th> 
荣誉 名 称 
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</th> 
<th> 
授予 单位 
</th> 
<th> 
级 别 
</th> 
tr> 
<tr> 
<td> 
2013 年 
</td> 
<td> 
x x 省 英语 口语 比赛 第 2 名 
</td> 
<td> 
x x 省 教育 厅 
</td> 
<td> 
省 级 
</td> 
</tr> 
<tr> 
<td> 
2013 年 
</td> 
<td> 
x x 市 平面 设计 大 赛 1 等 奖 
</td> 
<td> 
x x 市 教育 局 
</td> 
<td> 
市 级 
</td> 
</tr> 
<tr> 
<td> 
2014 年 
</td> 
<td> 
x x 市 网 页 设计 竞赛 3 等 奖 
</td> 
<td> 
x x 市 教育 局 
</td> 
<td> 
市 级 
</td> 
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</tr> 
</table> 
</div> 


本 模块 的 代码 结构 与 “2. 6 个 人 履历 模块 "一样 ,这 里 不 再 解释 。 


2.8 照片 集 模块 


1. 准备 网 页 素材 


在 本 模块 ,需要 选择 至 少 8 张 合 适 的 个 人 照片 添加 到 网 页 中 。 尽 量 选择 横向 的 照片 ， 
以 便 在 浏览 器 中 浏览 。 为 了 方便 排版 ,将 照片 尺寸 统一 设置 为 长 度 180px、 宽 度 120px。 


2. 添加 网 页 内 容 


将 如 下 HTML 代码 添加 到 二 div id= "info4" 盖 二 /div 过 元素 内 部 


<div id= "info4" class = "container bg- default"> 
<h2> 
照片 集 
</h2> 
<div class = "thumbnail ~— primary"> 
< img src = "img/photo01. jpg" /> 
<p> 
个 人 照片 01 
</p> 
</div> 
<div class = "thumbnail ~ primary"> 
< img src = "img/photo02. jpg" /> 
<p> 
个 人 照片 02 
</p> 
</div> 
<div class = "thumbnail ~ primary"> 
< img src = "img/photo03. jpg" /> 
<p> 
个 人 照片 03 
</p> 
</div> 
<div class = "thumbnail — primary"> 
< img src = "img/photo04. jpg" /> 
<p> 
个 人 照片 04 
</p> 
</div> 
<div class = "thumbnail - primary"> 
< img src = "img/photo05. jpg" /> 
<p> 
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个 人 照片 05 
</p> 
</div> 
<div class = "thumbnail - primary"> 
< img src = "img/photo06. jpg" /> 
<p> 
个 人 照片 06 
</p> 
</div> 
<div class = "thumbnail - primary"> 
< img src = "img/photo07. jpg" /> 
<p> 
个 人 照片 07 
</p> 
</div> 
<div class = "thumbnail - primary"> 
< img src = "img/photo08. jpg" /> 
<p> 
个 人 照片 08 
</p> 
</div> 
</div> 


代码 说 明 如 下 : 
=div class= 一 "thumbnail-primary "二 一 


/div 二 是 一 个 照片 的 容器 ,里 面 有 一 个 img 元 


素 (显示 照片 ) 以 及 一 个 p 元 素 (显示 照片 标题 ) 。 
thumbnail-primary 是 一 个 CSS 自 定义 类 ,具体 定义 的 代码 在 下 一 步 设计 。 


3. 添加 网 页 样式 


将 如 下 CSS 代码 添加 到 网 页 头 的 一 style 二 一 /style 二 元 素 中 : 


.thumbnail — primary { 
width: 200px; 
margin: 10px; 
float: left; 
border: 1px solid# 639; 
} 
.thumbnail 一 primary > img 
width: 180px; 
height: 120px; 
border: 4px solid# fff; 
display: block; 
margin: 6px 6px 6px 6px; 


{ 


} 

.thumbnail — primary>p { 
text 一 align: center; 
font — size: lem; 
line — height: 3em; 
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background — color: #639; 
Color: #fff; 


margin: Opx; 
} 
代码 说 明 如 下 : 


thumbnail-primary 是 一 个 自 定义 类 ,定义 了 照片 容器 的 尺寸 (width)、 外 边 距 
(margin) ,边框 (border) 及 浮动 (float)。 

.thumbnail-primary 之 img 使 用 子 元 素 选择 器 的 方式 定义 照片 容器 中 img 元 素 ( 照 
片 ) 的 样式 。 类 似 地 ,. thumbnail-primary 之 p 使 用 子 元 素 选择 器 的 方式 定义 照片 容器 中 
Pp 元 素 (标题 ) 的 样式 。 值 得 注意 的 是 ,p 元 素 的 样式 中 设置 “line” 一 “height”( 行 高 ) 为 
3em, 但 “font”>“size”( 字 体 大 小 ) 为 em。 这 时 ,元 素 中 的 文字 自动 在 行 中 垂直 居中 。 


2.9 ”作品 集 模块 


1. 准备 网 页 素材 


在 本 模块 ,需要 选择 至 少 8 张 合 适 的 作品 截图 添加 到 网 页 中 。 尽 量 选择 横向 的 照片 ， 
以 便 在 浏览 器 中 浏览 。 为 了 方便 排版 ,将 照片 的 尺寸 统一 设置 为 长 度 180px、 宽 
度 120px。 


2. 添加 网 页 内 容 


将 如 下 HTML 代码 添加 到 二 div id 一 "info5" 过 二 /div 之 元素 内 部 : 


<div id= "info5”class = "container bg- default"> 
<h2 > 
作品 集 
</h2 > 
< div class = "thumbnail — default"> 
< img src = "img/work01. jpg" /> 
<p> 
个 人 作品 01 
</p> 
</div> 
<div class = "thumbnail - default"> 
< img src = "img/ work02. jpg" /> 
<p> 
个 人 作品 02 
</p> 
</div> 
<div class = "thumbnail - default "> 
< img src = "img/ work03. jpg" /> 
<p> 
个 人 作品 03 
</p> 
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</div> 
<div class = "thumbnail — default "> 
< img src = "img/ work04. jpg" /> 
<p> 
个 人 作品 04 
</p> 
</div> 
<div class = "thumbnail — default "> 
< img src = "img/ work05. jpg" /> 
<p> 
个 人 作品 05 
</p> 
</div> 
<div class = "thumbnail — default "> 
< img src = "img/ work06. jpg" /> 
<p> 
个 人 作品 06 
</p> 
</div> 
<div class = "thumbnail — default "> 
< img src = "img/ work07. jpg" /> 
<p> 
个 人 作品 07 
</p> 
</div> 
<div class = "thumbnail — default "> 
< img src = "img/ work08. jpg" /> 
<p> 
个 人 作品 08 
</p> 
</div> 
</div> 


代码 说 明 如 下 : 

二 div class 一 "thumbnail-default" 二 一 /div 二 是 一 个 照片 的 容器 ,里 面 有 一 个 img 元 
素 ( 显 示 照 片 ) 以 及 一 个 p 元 素 ( 显 示 照 片 标题 ) 。 

thumbnail-default 是 一 个 CSS 自 定义 类 ,具体 定义 的 代码 在 下 一 步 设计 。 


3. 添加 网 页 样式 
将 如 下 CSS 代码 添加 到 网 页 头 的 二 style 二 二 /style 二 元 素 中 : 


.thumbnail — default{ 
width: 200px; 
margin: 10px; 
float: left; 
border: 1px solid# ccc 
} 
.thumbnail — default > img { 
width: 180px; 


height: 120px; 
border: 4px solid# fff; 
display: block; 
margin: 6px 6px 6px 6px 

} 

.thumbnail — default>p{ 
text — align: center; 
font 一 size: lem; 
line — height: 3em; 
background — color: #ccc; 
color: #000; 
margin: Opx 


} 


代码 说 明 如 下 : 
thumbnail-default 与 “2. 8 照片 集 模块 ”中 的 thumbnail-primary 功能 类 似 。 由 于 这 
两 个 模块 的 区 域 是 在 一 起 的 ,为 了 有 所 区 别 , 用 另 一 种 颜色 系列 来 显示 。 


4. 效果 图 
作品 集 模块 效果 图 如 图 2-18 所 示 。 


图 2-18 作品 集 模块 


2.10 “与 我 联系 ”模块 


1. 准备 网 页 素材 
在 本 模块 ,请 根据 实际 情况 ,准备 如 表 2-11 所 示 信 息 。 
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表 2-11 网 页 素材 准备 


联系 信息 片 格 式 尺寸 

姓名 icon01. png 透明 PNG 图 片 32pxX32px 

手机 icon02. png 透明 PNG 图 片 32pxX 32px 

QQ 号 icon03. png 透明 PNG 图 片 32pxX 32px 

E-mail icon04. png 透明 PNG 图 片 32pxX32px 

联系 地 址 icon05. png 透明 PNG 图 片 32pxX 32px 
2. 添加 网 页 内 容 


将 如 下 HTML 代码 添加 到 二 div id 一 "info6" 盖 一 /div 之 元 素 内 部 : 


<div id= "info6" class = "container bg- primary"> 


<h2> 
与 我 联系 

</h2> 

<div class= "icon icon— icon01"> 
姓名 

</div> 

<div class= "icon icon— icon02"> 
12345678901 

</div> 

<div class = "icon icon— icon03"> 
1234567890 

</div> 


<div class = "icon icon- icon04"> 
1234567890@qq. com 


</div> 
<div class = "icon icon— icon05"> 
XXX 大 学 
</div> 
</div> 
代码 说 明 如 下 : 


二 div class 一 "icon icon-icon01" 二 二 /div 之 是 一 个 联系 方式 的 容器 ,里 面 的 内 容 为 具 
体 文字 。 该 元 素 通过 icon 这 个 CSS 类 控制 元 素 的 样式 ,通过 icon-icon01 设置 元 素 的 背 
景 图 片 (icon01. png)。 这 两 个 CSS 类 具体 定义 的 代码 在 下 一 步 设 计 。 


3. 添加 网 页 样式 
将 如 下 CSS 代码 添加 到 网 页 头 的 二 style 二 二 /style 二 元 素 中 : 


,icon { 
width: 160px; 
height: 32px; 
line — height: 32px; 
margin: 10px 10px 10px Opx; 
display: inline — block; 
padding: 5px 5px 5px 42px; 


background: no 一 repeat 5px Spx; 
} 
.icon: hover { 

background — color: #969; 
} 
.icon — icon01 { 

background — image: url(img / icon01.png); 
} 
.icon — icon02 { 

background — image: url(img / icon02.png); 
} 
.icon — icon03 { 

background — image: url(img / icon03.png); 
} 
.icon 一 icon04 { 

background — image: url(img / icon04.png); 
} 
.icon — icon05 { 

background — image: url(img / icon05.png); 
} 


代码 说 明 如 下 : 

icon 是 一 个 自 定义 类 ,定义 了 照片 容器 的 尺寸 (width 和 height) 、 内 外 边 距 (padding 
和 margin) \ 行 高 (line-height) 、 显 示 (display) .背景 (background) 。 

icon-icon01 一 icon-icon05 使 用 background-image 属性 设置 背景 图 片 。 

这 两 类 样式 必须 联合 使 用 ( 层 县 ): icon 中 设置 背景 图 片 的 重复 方式 (background- 
repeat) 为 不 重复 (no-repeat) ,并 且 设 置 背 景 图 片 的 位 置 偏 移 量 (background-position ) 为 
5px 5px( 往 右 偏 移 5px, 往 下 偏 移 5px) ,与 icon 的 内 边 距 相 呼应 。 要 注意 的 是 ,icon 的 左 
内 边 距 设置 为 42px, 因 为 背景 图 片 (icon01. png) 的 尺寸 是 32pxX32px, 为 了 不 让 文字 显 
示 在 背景 图 片上 方 (防止 遮盖 背景 图 片 ) ,需要 将 左 内 边 距 留 出 足够 的 空间 ,具体 布局 的 尺 
寸 数据 计算 如 图 2-19 所 示 。 


背景 图 片 向 右 偏 移 5px 
背景 图 片 宽度 32px 


背景 图 片 与 文字 间隔 5px 


背景 总 
图 片 放学 


左边 距 
42px 


图 2-19 布局 尺寸 计算 


Te 
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4. 效果 图 


“与 我 联系 ”模块 效果 图 如 图 2-20 所 示 。 


图 2-20 “与 我 联系 ”模块 


2.11 项 目 进 阶 


在 本 项 目 中 ,照片 集 以 及 作品 集 的 图 片 和 文字 没有 设置 超 链接 ,请 根据 实际 情况 ,将 
这 些 二 级 页 面 制作 出 来 ,并 在 index. htm 的 相应 元 素 上 创建 超 链接 。 


2.12 课外 实践 


请 以 宣传 某 个 公益 事业 为 目的 ,主题 自 拟 , 设 计 一 个 单 页 网 站 。 参 考 网 站 如 下 所 示 。 


腾讯 公益 : 
新 浪 公 益 
网 易 公 益 : 
凤凰 公益 : 


http 
http 
http 


http 


://gongyi 


://gongyi. 


://gongyi 


://gongyi 


. qq. com. 
sina. com. cn. 
. 163. com. 


. ifeng. com. 


Fo 


知识 目标 : 

。 掌握 响应 式 网 页 设计 方法 

。 掌握 多 网 页 站 点 设计 方法 

能 力 目 标 : 

。 能 使 用 Bootstrap 进行 响应 式 网 页 设计 
。 能 设计 多 网 页 站 点 


3.1 项 目 介绍 


本 项 目 将 设计 一 个 教育 机 构 的 门户 网 站 ,以 多 页 面 的 形式 展示 该 教育 机 构 的 各 项 信 
息 。 本 项 目 分 为 以 下 6 部 分 : 四 网 站 规划 与 设计 ; @ 设 计 学 院 首页 ; @ 设 计 专 业 介绍 页 ; 
图 设计 * 关 于 我 们 "页 ; @ 设 计 最 新 资讯 页 ; @ 设 计 “ 联 系 我 们 ”页 。 


3.2 知识 准备 
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Bootstrap 是 Twitter 推出 的 一 个 开源 的 用 于 前 端 开 发 的 工具 包 。 它 是 CSS 和 
HTML 的 集合 ,采用 最 新 的 浏览 器 技术 ,给 Web 开发 提供 时 尚 的 版 式 、 表 单 、 按 钮 .表格 、 
网 格 系统 等 ,目前 最 新 的 版 本 为 v3. 3. 4。 

Bootstrap 下 载 后 是 一 个 zip 压缩 包 , 解 压 后 看 到 它 包含 一 系列 CSS 文件 和 JS 文件 。 
以 v3.3.4 为 例 ,其 目录 结构 如 下 所 示 : 


bootstrap 一 3.3.4/ 
上 一 css/ 
| 上 -一 bootstrap.css 
| 上 -一 bootstrap.css.map 
| 上 一 bootstrap. min. css 
| 上 一 bootstrap 一 theme. css 
| 上 一 bootstrap 一 theme. css.map 
| [bootstrap - theme. min. css 
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广 一 js/ 

| 上 一 bootstrap. js 

| “一 一 bootstrap.min. js 

[一 一 fonts/ 

上 一 9lYphicons - halflings - regular. eot 
上 一 一 9lYphicons - halflings - regular. svg 
上 一 glYphicons - halflings - regular.ttf 
上 一 9lYphicons - halflings - regular. woff 
[一 一 9lYyphicons - halflings - regular. woff2 


css\js\fonts 这 3 个 目录 可 以 直接 使 用 到 任何 Web 项 目 中 。Bootstrap 提供 了 编译 
好 的 CSS 和 JS(Cbootstrap. * ) 文 件 , 还 有 经 过 压缩 的 CSS 和 JS(Cbootstrap. min. * ) 文 件 ; 
同时 提供 CSS 源码 映射 表 (bootstrap. * . map) ,可 以 在 某 些 浏览 器 (如 Chrome) 的 开发 
工具 中 使 用 。 它 还 包括 来 自 Glyphicons 的 图 标 字 体 , 用 在 附带 的 Bootstrap 主题 中 。 


下 面 就 是 一 个 使 用 Bootstrap 的 网 页 模板 : 


<!DOCTYPE html > 
<html lang= "zh— CN"> 
<head> 
<meta charset = "utf 一 8"> 
<meta http 一 equiv= "X- UA— Compatible" content = "IE = edge"> 


< meta name = "viewport" content = "width = device- width, initial- scale= 1"> 


<! -- 上 述 3 个 meta 标签 必须 放 在 最 前 面 ,任何 其 他 内 容 都 必须 跟随 其 后 ! --> 


<title> Bootstrap 模版 </title> 

< link href = "css/bootstrap. min.css" rel = "stylesheet"> 
</head> 
<body> 

< hl > Bootstrap 模版 </hl > 

< script src = "js/bootstrap.min. js"></script> 


</body> 
</html > 


1. 布局 容器 


Bootstrap 提供 一 个 . container 容器 。 该 容器 有 以 下 两 种 类 型 。 
(1) . container 类 用 于 固定 宽度 ,并 支持 响应 式 布 局 的 容器 。 


< div class = "container"> 
</div> 
(2) . container-fluid 类 用 于 100% 宽 度 ,占据 整个 窗口 的 容器 。 


<div class = "container 一 fluid"> 


</div> 
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2. 栅 格 系统 


Bootstrap 提供 了 一 套 响应 式 ,移动 设备 优先 的 流 式 栅 格 系统 。 随 着 屏幕 (viewport) 
尺寸 增加 ,系统 自动 分 为 最 多 12 列 。 

栅 格 系统 通过 一 系列 行 (row) 与 列 (column) 的 组 合 来 创建 页 面 布 局 。 开 发 者 只 需要 
把 相应 的 内 容 放 入 这 些 创 建 好 的 布局 ,就 可 以 实现 响应 式 网 页 布局 。 下 面 介绍 Bootstrap 
栅 格 系统 的 工作 原理 。 

(1)“ 行 (row)” 必 须 包 含 在 . container( 固 定 宽度 ) 或 . container-fluid(100% 宽 度 ) 中 。 

(2) 通过 “ 行 (row) "在 水 平方 向 创建 一 组 “ 列 (column)”。 

(3) 具体 的 网 页 内 容 应 当 放 置 于 * 列 (column)” 中 ,并 且 只 有 * 列 (column)” 可 以 作为 
行 (row)” 的 直接 子 元 素 。 

类 似 . row 和 . col-xs-4 这 种 预定 义 的 类 ,可 以 用 来 快速 创建 栅 格 布局 。 

栅 格 系统 中 的 列 通过 指定 1 一 12 的 值 来 表示 其 跨越 的 范围 。 例 如 ,3 个 等 宽 的 列 可 
以 使 用 3 个. col-xs-4 来 创建 。 

如 果 1* 行 (row)” 中 包含 的 * 列 (column)” 大 于 12, 多 余 的 “ 列 (column)” 所 在 的 元 素 
将 被 作为 一 个 整体 男 起 一 行 排列 。 

布局 示例 如 下 : 


<div class = "row"> 
<div class = "col-xs 一 12 col-sm-6col—-md-8">.col -xs—-12.col- sm-6.col-md-8 
</div> 
<divclass="col -xs-6col-md-4">.col -xs-6.col—-md-4</div> 
</div> 
<div class = "row"> 
<divclass="col -xs—-6col- sm-4">.col -xs-6.col— sm- 4</div> 
<divclass="col -xs—-6 col- sm-4">.col -xs-6.col— sm- 4</div> 
<div class = "clearfixvisible- xs— block"></div> 
<divclass="col -xs—-6col- sm-4">.col -xs-6.col— sm- 4</div> 


</div> 
普通 PC 浏览 器 (col-md- * ) 下 的 样式 如 图 3-1 所 示 。 
.Col-xs-12 .col-sm-6 .coHmd-8 Col-xs-6 .coHmd-4 
Col-xs-6 .col-sm-4 ‘Col-xs-6 col-sm-4 Col-xs-6 coHsm-4 


图 3-1 普通 PC 浏览 器 (col-md- * ) 下 的 样式 
平板 电脑 或 手机 浏览 器 (col-sm-* 或 col-xs-* ) 下 的 样式 如 图 3-2 所 示 。 


CoLXxs-12 coHsm-6 coHmd-8 

cotxs-6 coHmd-4 

CoHXS-6 COHsm-4 -coHXs-6 coHsm-4 
-COHXs-6 coFsm-4 


3-2 平板 电脑 或 手机 浏览 器 (col-sm- * 或 col-xs- * ) 下 的 样式 
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3. 表格 


Bootstrap 提供 . table 类 ,可 以 为 任意 一 table 之 标签 添加 该 类 型 ,如 图 3-3 所 示 。 


<table class = "table"> 


</table> 


1 行 1 列 1 行 2 列 1 行 3 列 


2 行 1 列 2 行 2 列 2 行 3 列 


3 行 1 列 3 行 2 列 3 行 3 列 


图 3-3 ”Bootstrap 提供 . table 类 显示 的 表格 


同时 ,还 提供 几 个 特殊 类 型 用 于 层 释 : 


(1) .table-striped 类 实现 斑马 条 纹样 式 , 如 图 3-4 所 示 。 


<table class = "table table — striped"> 


</table> 


1 行 1 列 1 行列 1 行 3 列 


2 行 1 列 2 行 2 列 2 行 3 列 


3 行 ! 列 3 行 2 列 3 行 3 列 


图 3-4 .table-striped 类 实现 斑马 条 纹样 式 
(2) . table-bordered 类 为 表格 和 其 中 的 每 个 单元 格 增加 边框 ,如 图 3-5 所 示 。 


< table class = "table table ~ bordered"> 


</table> 


1 行 1 列 1 行 2 列 1 行 3 列 


2 行 1 列 2 行 2 列 2 行 3 列 


3 行 1 列 3 行 2 列 3 行 3 列 


图 3-5 .table-bordered 类 为 表格 和 其 中 的 每 个 单元 格 增加 边框 
(3) . table-hover 类 让 每 一 行 对 鼠标 悬 停 状态 做 出 响应 ,如 图 3-6 所 示 。 


< table class = "table table — hover"> 


</table> 
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1 行 1 列 1 行 2 列 1 行 3 列 
2 行 1 列 2 行 2 列 2 行 3 列 


3 行 1 列 3 行 2 列 3 行 3 列 


图 3-6 .table-hover 类 让 每 一 行 对 鼠标 悬 停 状 态 做 出 响应 
(4) . table-condensed 类 让 表格 更 加 紧凑 ,如 图 3-7 所 示 。 


<table class = "table table — condensed"> 


</table> 


1 行 1 列 1 行 2 列 1 行 3 列 


2 行 1 列 2 行 2 列 2 行 3 列 
3 行 1 列 3 行 2 列 3 行 3 列 


图 3-7 .table-condensed 类 让 表格 更 加 紧凑 


将 任何 . table 元 素 包 于 在 . table-responsive 元 素 内 , 即 可 创建 响应 式 表格 , 当 屏 幕 大 
于 768px 宽度 时 ,没有 水 平 滚动 条 ; 但 在 小 屏幕 设备 上 (小 于 768px) ,会 出 现 水 平 滚动 
条 ,如 图 3-8 所 示 。 


<div class = "table — responsive"> 
<table class = "table"> 


</table> 


</div> 
# Tableheading Table heading Table heading Table heading Tab 
1 Table cell Table cell Table cell Table cell Tab 
2 Table cell Table cell Table cell Table cell Tab 
3 Table cell Table cell Table cell Table cell Tab 
| » 

3-8 出 现 滚动 条 的 响应 式 表格 
4. 表单 


在 Bootstrap 中 ,为 单独 的 表单 控件 提供 了 一 个 名 为 . form-control 的 全 局 样式 类 ， 
二 input 之 过 textarea 这 和 二 select 记 元 素 都 可 以 使 用 该 样式 。 使 用 后 ,这 些 控件 都 将 被 默 
认 设 置 宽度 属性 为 width:100%。 一 般 情况 下 .在 控件 的 前 面 放置 一 个 label 元 素 , 同 时 
将 label 元 素 与 控件 元 素 放 在 一 个 包含 . form-group 样式 的 容器 中 。 
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< form> 

< div class = "form— group"> 

< label for = "username"> 

Username: * 

</label> 
< input type = "text" class = "form— control" id = "username"/> 
</div> 
<div class = "form 一 group"> 

< label for = "email"> 


Email: 关 
</label> 
< input type = "text" class = "form - control" id = "email"/> 
</div> 
</form> 
以 上 代码 运行 的 效果 如 图 3-9 所 示 。 
Usemame:* 
Email:* 
图 3-9 表单 效果 
5. 按钮 


在 Bootstrap 中 ,允许 为 二 a 二 二 button 二 或 二 input 过 元素 添 加 按钮 类 样式 ,如 图 3-10 
所 示 。 
<a class = "btnbtn- default" href ="#"”role= "button"> 超 链接 按钮 </a> 


< button class = "btnbtn — default" type = "submit"> Button 元 素 按钮 </button> 
< input class = "btnbtn - default" type = "button" value = "Input 元 素 按钮 "> 


[全 接 按钮 |[ Button 元 素 按钮 || nput 元 素 按钮 


图 3-10 在 Bootstrap 中 ,二 a 之 二 button 记 或 二 input 记 元 素 按钮 样式 


从 兼容 性 角度 考虑 ,在 上 述 3 种 元 素 中 ,一 button 二 是 Bootstrap 官方 强烈 建议 尽 可 
能 使 用 的 方式 。 

对 于 btn 按钮 样式 ,Bootstrap 预定 义 了 几 种 颜色 样式 ,如 图 3-11 所 示 , 用 户 可 以 根 
据 实际 情况 ,快速 创建 所 需 的 按钮 。 


< button type = "button" class = "btn btn - default">( 默 认 样 式 )Default </button > 
< button type = "button" class = "btn btn - primary">( 首 选项 )Primary</button > 

< button type = "button" class = "btn btn - success">( 成 功 )Success </button > 

< button type = "button" class = "btn btn - info">( 一 般 信 息 ) Info </button > 

< button type = "button" class = "btn btn - warning">( 警 告 )Warning </button > 


I 


[项目 3 进 阶 项 


: 教育 门户 网 站 前 台 设计 | | 


< button type = "button" class = "btn btn - danger">( 危 险 )Danger </button > 
< button type = "button" class = "btn btn- link">( 链 接 )Link </button > 


《 喜 认 样式 )Default (首选 项 〉Primary 


ET 


(链接 》Link 
图 3-11 Bootstrap 预定 义 的 几 种 按钮 颜色 样式 


除了 颜色 以 外 ,可 以 使 用 . btn-lg、. btn-sm 或 . btn-xs 来 定义 不 同 尺 十 的 按钮 ,如 
图 3-12 所 示 。 


<p> 
< button type = "button" class = "btnbtn - primarybtn 1g">( 大 按钮 )Largebutton </button > 
< button type = "button" class = "btnbtn - defaultbtn- 1g">( 大 按钮 )Largebutton </button > 
</p> 
<p> 
< button type = "button" class = "btnbtn - primary">( 默 认 尺 寸 )Defaultbutton </button> 
< button type = "button" class = "btnbtn - default">( 默 认 尺 寸 )Defaultbutton </button > 
</p> 
<p> 
< button type = "button" class = "btnbtn - primarybtn sm">( 小 按钮 )Smallbutton </button > 
< button type = "button" class = "btnbtn - defaultbtn sm">( 小 按钮 )Smallbutton </button > 
</p> 
<p> 
< button type = "button" class = "btnbtn - primarybtn - xs">( 超 小 尺寸 )Extra smallbutton 
</button > 
< button type = "button" class = "btnbtn - defaultbtn - xs">( 超 小 尺寸 )Extra smallbutton 
</button > 
</p> 


(大 按钮 Large button (大 按钮 )Large button 


《小 按钮 )Small bution 《小 措 钮 ) Smallbuton 


起 小 尺寸 ) Extra small button 
3-12 使用. btn-lg、. btn-sm 或 . btn-xs 来 定义 不 同 尺寸 的 按钮 


在 移动 设备 上 ,很 多 按钮 独占 一 行 , Bootstrap 为 这 种 按钮 定义 了 . btn-block 类 。 通 
过 给 按钮 添加 . btn-block 类 .可 以 将 其 拉 伸 至 父 元 素 100% 的 宽度 ,而 且 按 钮 变 为 块 级 
(block) 元 素 , 如 图 3-13 所 示 。 


< button type = "button" class = "btn btn — primary btn - lgbtn - block">( 块 级 元 素 ) 
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Blocklevelbutton </button > 


< button type = "button" class = "btn btn - default btn - 1gbtn - block">( 块 级 元 素 ) 
Blocklevelbutton </button > 


( 块 级 元 素 ) Block level button 


( 块 级 元 素 ) Block level button 


图 3-13 通过 给 按钮 添加 . btn-block 类 将 按钮 拉 伸 至 块 级 
6. 图 片 形状 


通过 为 二 img 二 元素 添加 以 下 相应 的 类 ,让 图 片 呈现 不 同 的 形状 (IE8 不 支持 )， 
如 图 3-14 所 示 。 


< img src=" .." class= "img— rounded"> 


"class= "img— circle"> 


< img src="... .." class= "img— thumbnail"> 


图 3-14 ”通过 为 <img> 元 素 添加 相应 的 类 让 图 片 呈现 不 同 的 形状 

有 关 Bootstrap 的 更 多 使 用 方法 ,读者 可 以 通过 阅读 其 官方 网 站 的 文档 和 例子 自行 
Bootstrap 官方 网 站 : https://github. com/twbs/bootstrap/ 
Bootstrap 中 文 网 站 : http://www. bootcss. com/ 
322 JavaScript 基础 

本 项 目 将 用 到 少量 JavaScript。JavaScript 是 一 种 轻 量 级 的 编程 语言 ,一般 做 入 在 
HTML 页 面 中 ,由 浏览 器 执行 。 本 书后 面 的 几 个 项 目 与 JavaScript 有 很 大 的 关系 。 

1. JavaScript 语法 特点 


(1) 区 分 大 小 写 : 变量 、 函 数 名 、 运 算 符 以 及 其 他 一 切 东 西 都 是 区 分 大 小 写 的 。 
(2) 变量 是 弱 类 型 : 变量 无 特定 的 类 型 ,定义 变量 时 只 用 var 运算 符 。 可 以 将 它 初始 
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化 为 任意 值 ,也 可 以 随时 改变 变量 所 存 数据 的 类 型 。 
(3) 每 行 结尾 的 分 号 可 有 可 无 : 允许 开发 者 自行 决定 是 否 以 分 号 结束 一 行 代码 。 如 
果 没 有 分 号 ,就 把 折 行 代码 的 结尾 看 作 该 语句 的 结尾 注释 : 单行 注释 以 双 斜 杠 开头 (//); 
多 行 注释 以 单 斜 杠 和 星 号 开头 (/ * ) ,以 星 号 和 单 斜 杠 结尾 ( * /)。 
(4) 括号 表示 代码 块 : 代码 块 表示 一 系列 应 该 按 顺 序 执行 的 语句 ,这 些 语句 被 封装 
在 左 括号 ({) 和 右 括 号 (} ) 之 间 。 
<html> 
<head></head> 
<body> 
< script type = "text/javascript"> 
document. write( "Hello World! "); 
</script > 
</body> 
</html > 
< 一 script type 一 "text/javascript" 二 和 二/script 二 告诉 浏览 器 JavaScript 从 何 处 开 
始 , 到 何 处 结束 。 
把 document. write 命令 输入 二 script type 一 "text/javascript" 二 与 二 /script 二 之 间 ， 
浏览 器 把 它 当 作 一 条 JavaScript 命令 来 执行 ,就 会 向 页 面 写 人 “Hello World!”。 


2. JavaScript 变量 

变量 命名 规则 为 : 第 一 个 字符 必须 是 字母 .下划线 (_) 或 美元 符号 ($ ); 余下 的 字符 
可 以 是 下 划 线 ,美元 符号 或 任何 字母 或 数字 字符 。 

// 定义 单个 变量 


Var count; 


// 定义 多 个 变量 


var count, amount, level; 


// 定义 变量 并 初始 化 
var count = 0, 
amount = 100; 


3. JavaScript 基本 数据 类 型 
(1) Undefined 类 型 : 当 声 明 的 变量 未 初始 化 时 ,该 变量 的 默认 值 是 undefined。 


alert( na 家 //undefined 

alert(age); // 错 误 : age is not defined 

(2) Null 类 型 : null 用 于 表示 尚未 存在 的 对 象 。 

Null 类 型 的 值 是 null, 它 表示 一 个 空 对 象 指针 ,没有 指向 任何 对 象 。 如 果 一 个 变量 
的 值 是 null, 当前 变量 很 有 可 能 就 是 垃圾 收集 的 对 象 ,使 用 typeof 监测 null 值 时 返回 
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“object” 。 
建议 : 如 果 变 量 是 要 用 来 保存 对 象 的 额 , 则 初始 化 为 null, 到 时 就 可 以 检测 该 变量 是 
否 已 经 保存 了 一 个 对 象 的 引用 。 


var person = null; 
alert (typeof person); //"object" 


注意 : undefined 值 是 派生 自 null 的 ,所 以 对 它们 执行 相等 测试 会 返回 true, 例 如 : 
alert(null = = undefind); //true 


(3) Boolean 类 型 : 有 两 个 值 true 和 false。 
(4) Number 类 型 : 这 种 类 型 既 可 以 表示 32 位 的 整数 ,还 可 以 表示 64 位 的 浮 点 数 。 
数值 类 型 有 很 多 值 ,最 基本 的 就 是 十 进 制 。 例 如 


var num= 510; 


除了 十 进 制 ,整数 还 可 以 是 八进制 或 十 六 进 制 的 ,其 中 八进制 字面 值 的 第 1 位 必须 是 
0, 然 后 是 八进制 数字 序列 。 如 果 字面 值 中 的 数值 超出 了 范围 ,前 导 零 将 被 忽略 。 后 面 的 


数值 将 被 当 作 十 进 制 数 解 析 。 
var numl = 070; // 八 进 制 的 56 
var num2 = 079; // 无 效 的 八进制 一 解析 为 79 
var num3 = 08; // 无 效 的 八进制 一 解析 为 8 


十 六 进 制 数 的 前 面 则 必须 是 0x, 后 跟 十 六 进 制 数字 (0 一 F) ,不 区 分 大 小 写 。 例 如 : 


var numl = OxA; 
var num2 = Oxlf; 


除了 整数 ,还 有 浮 点 数值 ,如 下 所 示 : 


Var numl = 1.1; 
Var num2 =0.1; 


Var num3 = .1; // 有 效 ,但 不 推荐 
还 有 一 些 极 大 或 极 小 的 数值 ,用 科学 计数 法 表示 如 下 : 
Var num = 123.456e10; 


浮 点 数值 的 最 高 精度 是 17 位 小 数 ,但 是 计算 时 其 精确 度 远 远 不 如 整数 。 例 如 ,0. 1 十 
0.2 不 等 于 0.3, 而 是 0. 3000000000000004。 所 以 在 做 判断 时 , 千 万 不 要 用 浮 点 数 相 加 判 
断 等 于 预想 中 的 某 个 值 。 

在 JavaScript 中 ,数值 最 小 的 是 Number. MIN_VALUE。 这 里 可 以 想象 成 Number 
是 一 个 类 ,而 MIN_VALUE 是 一 个 静态 变量 ,储存 最 小 值 ; 同样 地 ,最 大 的 是 Number. 
MAX_VALUE。 

如 果 计 算 中 超出 了 这 个 最 大 值 和 最 小 值 范围 ,将 被 自动 转换 成 Infinity 值 ; 如 果 是 负 
数 ,就 是 -Infinity; 整数 就 是 Infinity。Infinity 的 意思 是 无 穷 ,也 就 是 正 、 负 无 穷 , 跟 数 学 
中 的 概念 是 一 样 的 。 但 是 Infinity 无 法 参与 计算 。 可 以 用 原生 函数 确定 是 不 是 有 穷 : 
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isFinite();。 只 有 位 于 数值 范围 内 , 才 会 返回 true。 

在 JavaScript 中 ,数值 除了 那些 普通 的 整数 、 浮 点 数 . 最 大 值 . 最 小 值 ,无 穷 之 外 ,还 有 
一 个 特殊 的 值 ,就 是 NaN, 用 于 表示 一 个 本 来 要 返回 数值 的 操作 数 未 返回 数值 的 情况 。 
比如 ,任何 数值 除 以 0 会 返回 NaN ,因此 不 会 影响 代码 的 执行 。 

NaN 的 特点 如 下 所 述 。 

@ 任何 设计 NaN 的 操作 (如 NaNV0) 都 返回 NaN。 

@ NaN 与 任何 值 都 不 相等 ,包括 NaN 本 身 。 例 如 : 


alert(NaN = = NaN); //false 
所 以 ,JavaScript 中 有 一 个 isNaN( 〇 函数 ,该 函数 接收 一 个 参数 ,任意 类 型 ,有 助 于 确 
定 该 参数 是 否 “不 是 数值 ”。 


(5) String 类 型 : 字符 串 , 没 有 固定 大 小 。 

字符 串 可 以 由 单 引号 或 双 引 号 表示 。 在 JavaScript 中 ,这 两 种 引号 是 等 价 的 ,例如 : 

Var name = ‘jwy'; 

Var author = "jwy"; 

字符 串 可 以 直接 用 字面 量 赋值 。 任 何 字符 串 的 长 度 都 可 以 通过 访问 length 属性 
获得 。 

在 JavaScript 中 的 字符 串 是 不 可 变 的 。 字 符 串 一 旦 创建 ,它们 的 值 就 不 能 改变 。 要 
改变 某 个 变量 保存 的 字符 串 ,首先 要 销毁 原来 的 字符 串 , 再 用 另 一 个 新 的 字符 串 填充 该 
变量 。 

var name = "jwy"; 

name = "jwy" + "study javascript"; 

一 开始 ,name 是 保存 字符 串 “jwy” 的 ; 第 二 行 代码 将 "jwy” 十 ”study javascript” 值 重 
新 赋 给 name, 它 先 创建 一 个 能 容纳 这 个 长 度 的 新 字符 串 , 然 后 填充 ,并 销毁 原来 的 字 


符 串 。 

几乎 每 个 值 都 有 自己 的 toString() 方 法 ,在 后 面 将 解释 这 个 方法 是 从 哪里 来 的 , 它 返 
回 相应 值 的 字符 串 表 现 。 

var age= 11; 

var ageToString =age.toString(); Wt 

数值 ,布尔 值 . 对 象 和 字符 串 值 都 有 toString(), 但 是 null 和 undefined 值 没 有 这 
个 方法 。 


一 般 来 说 ,调用 toString() 方 法 不 必 传 递 参数 ,但 是 在 调用 数值 的 toString 方法 时 ， 
可 以 传递 一 个 参数 ,用 来 指定 要 输出 的 数值 的 基数 ( 即 输出 用 十 进 制 、 二 进 制 , 八 进 制 还 是 
十 六 进 制 表示 ) 。 


4. 数据 类 型 的 转换 
(1) 转换 成 字符 串 : Boolean .Number 和 String 都 有 toString() 方 法 ,可 以 把 它们 的 
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值 转换 成 字符 串 。 

(2) 转换 成 数字 : JavaScript 提供 了 两 种 把 非 数字 的 原始 值 转换 成 数字 的 方法 , 即 
parselnt() 和 parseFloat() 。 

(3) 强制 类 型 转换 : Boolean(value) 把 给 定 的 值 转换 成 Boolean 型 ; Number(Cvalue) 
把 给 定 的 值 转换 成 数字 (可 以 是 整数 或 浮 点 数 ) ;String(value) 把 给 定 的 值 转换 成 字符 串 。 


var s = String("hello"); 


alert (typeof s); // 结 果 是 string 
var sl = new String("world"); 
alert(typeof s1); // 结 果 是 object 


5. JavaScript 分 支 语句 
(1) 让 语句 : 在 一 个 指定 的 条 件 成 立时 ,执行 代码 。 


var num = 100; // 定 义 变量 num, 并 赋值 
// 证 语句 开始 ,判断 num 是 否 等 于 100, 如 果 是 , 则 执行 花 括号 内 的 语句 
if (num == 100) { 

Purm++ 7 

alert(num) ; 


} 
(2) if.,. else 语句 : 在 指定 的 条 件 成 立时 ,执行 代码 ; 当 条 件 不 成 立时 ,执行 男 外 的 


代码 。 
var num = 100; // 定 义 变量 num, 并 赋值 
if (num> 100) { // 证 语句 开始 
alert(num + "大 于 100"); 
} 
else { //else 语 句 开 始 


alert(num +“" 小 于 或 等 于 100"); 
} 


(3) if. ,, elseif. .. else 语句 :使 用 该 语句 ,可 以 选择 执行 若干 块 代 码 中 的 一 个 。 


var num = 100; // 定 义 变量 num, 并 赋值 

if (num > 100) //if 语句 开始 
alert(num + "大 于 100"); 

else if(num== 100) //else if 语句 
alert(num + "等 于 100"); 

else //else 语 句 


alert(num + "小 于 100"); 
(4) switch 语句 :使 用 这 条 语句 ,可 以 选择 执行 若干 块 代码 中 的 一 个 。 
var num = 100; // 定 义 变量 num, 并 赋值 


Switch (num) { 
case1:{ 
alert("1"); 
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}; break; 
case 50: { 
alert("50"); 
}; break; 
case 100: { 
alert("100"); 
}; break; 
default: { 
alert(" 默 认 的 消息 框 !"); 
} 


6. JavaScript 循环 语句 
(1) for 循环 :在 脚本 的 运行 次 数 已 确定 的 情况 下 ,使 用 for 循环 。 


for (i = 0; i<= 5; i++){ 
document. write(" 数 字 是 "+ i); 
document. write("< br >"); 


} 
(2) while 循环 :利用 while 循环 ,在 指定 条 件 为 true 时 循环 执行 代码 。 


vari= 0; 

while (i<= 5){ 
document. write(" 数 字 是 ”+ i); 
document. write("< br >"); 
i++ 


} 


(3) do... while 循环 :利用 do... while 循环 ,在 指定 条 件 为 true 时 循环 执行 代码 。 
即使 条 件 为 false, 这 种 循环 会 至 少 执行 一 次 。 


vari= 0; 

dof 
document. write(i + "<br>"); 
it+; 


} while (i<= 5) 
(4) for. . .in 迭代 :for 语句 是 严格 的 迭代 语句 ,用 于 枚 举 对 象 的 属性 。 


document. write( "test < br >"); 

vara = [3, 4, 5, 7]; 

for (var test ina) { 

document. write(test + ":" + a[test] + "<br>"); 

} 

(5) break 和 continue 语句 : 执行 break 语句 .可 以 立即 退出 循环 ,阻止 再 次 反复 执 
行 任何 代码 。 执 行 continue 语句 ,只 是 退出 当前 循环 ,根据 控制 表达 式 , 还 允许 继续 下 一 
次 循环 。 
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for (i = 0; i<10; i++) { 
if (i == 3){ 
break; 
} 
document. write(i + ""); 
} 
// 输 出 12 
for (i = 0; i<10; i++){ 
if (i == 3){ 
continue; 
} 
document. write(i + ""); 


} 
// 输 出 12456789 


7. JavaScript 测试 语句 


(1) try... catch 语句 : 用 于 测试 代码 中 的 错误 。try 部 分 包含 需要 运行 的 代码 ， 
catch 部 分 包含 错误 发 生 时 运行 的 代码 。 
(2) throw 声明 : throw 声明 的 作用 是 创建 exception (异常 )。 可 以 把 这 个 声明 与 
try... catch 声明 配合 使 用 ,以 精确 输出 错误 消息 。 
var array = null; 
try { 
document. write(array[0]); 
} catch(err) { 
document. writeln("Error name: ”+ err.name + ""); 


document. writeln("Error message: " + err.message); 
4 
finally{ 
alert("object is null"); 
} 
程序 执行 过 程 如 下 所 述 : 
(1) array[0] 的 时 候 由 于 没有 创建 array 数组 ,array 是 个 空 对 象 ,程序 中 调用 array[ 0] 会 
产生 object is null 的 异常 。 
(2) catch (err) 语 句 捕 获 到 这 个 异常 .通过 err. name 打印 错误 类 型 ,通过 err. 
message 打印 错误 的 详细 信息 。 
(3) finally 类 似 于 Java 的 finally, 无 论 有 无 异常 都 会 执行 。 


8. 消息 框 

(1) alert: 警告 框 。 用 户 需 要 单 击 “ 确 定 ” 按 钮 ,才能 继续 操作 。 

alert(" 休 息 时 间 到 "); 

(2) confirm: 确认 框 。 如 果 用 户 单 击 “确认 ”, 返 回 值 为 true; 如 果 单 击 “ 取 消 ”, 返 回 


I 
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值 为 false。 
var r = confirm(" 休 息 时 间 到 了 吗 ?"); 


证 (rz == true) { 

document. write(" 到 了 "); 
} else{ 

document. write(" 还 没 到 "); 
} 


(3) prompt: 提示 框 。 如 果 用 户 单 击 “ 确 认 ”, 返 回 值 为 输入 的 值 ; 如 果 单 击 “ 取 消 ”， 


返回 值 为 null。 
Var score; // 分 数 
Var degree; // 分 数 等 级 


score = prompt(" 你 的 分 数 是 多 少 ?") if (score> 100) { 
degree = "100 分 满分 !"; 
} else{ 

switch (parseInt(score / 10)) { 

case 0: 

case 1: 

Case 2: 

Case 3: 

Case 4: 

Case 5: 

degree = "不 及 格 !"; 
break; 

Case 6: 

degree = "及 格 "; 
break; 

case 7: 

degree = "中 等 " 
break; 

case 8: 

degree = "良好 "; 
break; 

Case 9: 

degree = "优秀 "; 
break; 

case 10: 

degree = "满分 "; 

} //end of switch 
//end of else 
alert(degree); 

} 


9. JavaScript 内 置 对 象 


(1) Array: 用 于 在 单个 变量 中 存储 多 个 值 。Array 对 象 的 属性 length 返回 该 数组 
中 的 元 素 个 数 ,通常 在 使 用 循环 迭代 数组 中 的 值 时 用 到 ,如 下 所 示 : 
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Var myArray = new Array(1, 2, 3); 
for(var i=0; i<myArray. length; i++) { 
document. write(myArray[ i]); 


} 

(2) Date: 用 于 处 理 日 期 和 时 间 。 

JavaScript Date 对 象 可 以 在 没有 参数 的 情况 下 对 其 实例 化 : 

var myDate = new Date(); // 当 前 时 间 

或 传递 milliseconds (毫秒 ) 作 为 参数 : 

var myDate = new Date(milliseconds); 

或 传递 日 期 字符 串 作 为 参数 : 

var myDate = new Date(dateString); 

或 者 传递 多 个 参数 来 创建 一 个 完整 的 日 期 : 

var myDate = new Date(year, month, day, hours, minutes, seconds, milliseconds); 
toDateString 方法 将 日 期 转换 为 字符 串 ,toTimeString 方法 将 时 间 转 换 为 字符 串 : 


var myDate = new Date(); 

document. write(myDate. toDateString()); 

// 输 出 Tue Jun 09 2015 

document. write( myDate. toTimeString( )); 

// 输 出 14:23:56 GMT + 0800 (中 国标 准时 间 ) 

(3) Math: 用 于 执行 数学 任务 。 

Math 对 象 用 于 执行 数学 函数 。 它 不 能 实例 化 : 


var pi = Math.PI; 


此 外 ,Math 对 象 有 许多 属性 和 方法 ,向 JavaScript 提供 数学 功能 。 
(4) Number: 是 对 JavaScript 原始 值 Number 类 型 的 封装 。 
Number 对 象 是 一 个 数值 包装 器 。 可 以 使 用 new 关键 词 创建 ,并 设置 初始 变量 : 


var myNumber = new Number(12.3); 


除了 存储 数值 , Number 对 象 包含 各 种 属性 和 方法 ,用 于 操作 或 检索 关于 数字 的 信 
息 。Number 对 象 可 用 的 所 有 属性 都 是 只 读 常 量 ,这 意味 着 它们 的 值 始终 保持 不 变 , 不 能 
更 改 。 有 4 个 属性 包含 在 Number 对 象 里 : MAX_VALUE .MIN_VALUE .NEGATIVE 
_INFINITY 和 POSITIVE_INFINITY。 

MAX_VALUE 属性 返回 1. 7976931348623157e 十 308, 它 是 JavaScript 能 够 处 理 的 
最 大 数字 。 


document. write( Number. MAX VALUE); 
//Result is: 1.7976931348623157e + 308 
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MIN_VALUE 返回 5e-324, 这 是 JavaScript 中 最 小 的 数字 。 


document. write( Number. MIN_VALUE); 
//Result is: 5e— 324 


NEGATIVE_INFINITY 是 JavaScript 能 够 处 理 的 最 大 负数 ,表示 为 -Infinity。 


document. write( Number. NEGATIVE INFINITY); 
//Result is: — Infinity 


POSITIVE_INFINITY 属性 是 大 于 MAX_VALUE 的 任意 数 , 表 示 为 Infinity。 


document. write(Number. POSITIVE INFINITY); 

//Result is: Infinity 

(5) String: 用 于 处 理 文本 (字符 串 ) ,是 对 JavaScript 原始 值 String 类 型 的 封装 。 

JavaScript String 对 象 是 文本 值 的 包装 器 。 除 了 存储 文本 ，String 对 象 包含 一 个 属 
性 和 各 种 方法 来 操作 或 收集 有 关 文 本 的 信息 。String 对 象 不 需要 实例 化 便 能 使 用 。 例 
如 ,可 以 将 一 个 变量 设置 为 一 个 字符 串 ,String 对 象 的 所 有 属性 或 方法 将 都 可 用 于 该 
变量 。 

var myString = "My string"; 


String 对 象 只 有 一 个 属性 , 即 length, 它 是 只 读 的 。length 属性 可 用 于 只 返回 字符 串 
的 长 度 : 不 能 在 外 部 修改 它 。 下 述 代 码 提供 了 使 用 length 属性 确定 一 个 字符 串 中 的 字符 
数 的 示例 : 

var myString = "My string"; 


document. write(myString. length); 
//Results in a numeric value of 9 


该 代码 的 结果 是 “9”, 因 为 两 个 词 之 间 的 空格 也 作为 一 个 字符 计算 。 

chartAt 方 法 用 于 检索 字符 串 中 的 特定 字符 。 下 面 的 代码 说 明 如 何 返回 字符 串 的 第 
一 个 字符 : 

var myString = "My string"; 

document. write(myString. chartAt(0); 

// 输 出 

如 果 想 要 组 合 字符 串 , 使 用 加 号 (十 ) 将 这 些 字符 串 加 起 来 ,或 者 使 用 concat 方法 。 
该 方法 接受 无 限 数量 的 字符 串 参数 ,连接 它们 ,并 将 综合 结果 作为 新 字符 串 返 回 。 


var myStringl = "My"; 
Var myString2 = ""; 
var myString3 = "string"; 


document. write(myString. concat(myStringl, myString2, myString3); 
// 输 出 My String 


10. JavaScript 函数 


函数 是 由 事件 驱动 的 ,或 者 是 当 它 被 调用 时 执行 的 可 重复 使 用 的 代码 块 。 


< [hrMLs+css3 网 站 前 台 设计 项 目 化 教程 | 


以 下 是 创建 函数 的 语法 : 


function 函数 名 (varl, var2, ..., varX) { 
代码 .……. 
return 返回 值 
} 
(1) arguments 对 象 : 在 函数 代码 中 ,使 用 特殊 对 象 arguments 存放 函数 传递 的 形式 
参数 。 
(2) return 语句 : 用 于 设 定 返 回 值 。 返 回 值 可 以 是 原始 类 型 ,也 可 以 是 引用 类 型 。 
对 于 JavaScript 语言 的 高 级 运用 ,可 以 参阅 其 他 相关 教程 。 
JavaScript 学 习 网 站 有 以 下 两 个 。 
基础 教程 : http://www. w3school. com. cn/js/index. asp 
高 级 教程 : http://www. w3school. com. cn/js/index_pro. asp 


3.3 网 站 规划 与 设计 


331 网 站 设计 需求 


客户 需求 ,是 指 学 校 创建 门户 网 站 的 目的 和 对 网 站 提出 的 特定 要 求 。 了 解 客户 需求 ， 
是 建 好 学 校门 户 网 站 的 前 提 。 工 程 网 络 学 院 对 其 拟 建 的 门户 网 站 提出 了 以 下 几 点 要 求 。 

(1) 宣传 学 校 办 学 理念 ,展示 办 学 设施 ,专业 设置 .教师 队伍 等 ,提高 学 校 的 社会 知 
名 度 。 

(2) 适时 发 布 学 校 管理 ,教学 .招生 等 相关 信息 ,为 求学 者 提供 相关 咨询 服务 。 

(3) 获取 社会 各 界 对 学 校 教育 教学 情况 的 评价 和 意见 、 建 议 。 

(4) 建立 与 兄弟 院 校 进行 交流 学 习 的 平台 。 

(5) 向 社会 各 界 推荐 毕业 生 ,为 毕业 生 提供 就 业 信息 。 


332 网 站 风格 定位 


校园 网 站 是 学 校 的 网 上 形象 ,每 一 所 学 校 都 有 自己 的 特色 。 对 于 本 项 目 ,从 以 下 三 个 
方面 确定 该 网 站 的 风格 定位 。 

(1) 色彩 : 本 项 目 采 用 的 色彩 以 白 . 黑 . 红 为 主 基 调 , 具 有 明亮 、 健 康辉 煌 、 上 庄严 的 色 感 。 

(2) 排版 : 整体 为 上 、 下 分 割 型 。 把 整个 版 面 分 为 上 、 下 几 个 部 分 ,在 上 半 部 配置 图 
片 ,下 面 的 部 分 配置 文案 。 配 置 有 图 片 的 部 分 感性 而 有 活力 ,文案 部 分 则 理性 而 静止 。 
上 、 下 部 分 配置 的 图 片 可 以 是 一 幅 或 多 幅 。 

(3) 特效 : 本 网 站 中 所 有 的 动画 效果 采用 JavaScript 脚本 制作 。 


333 网 站 结构 布局 


作为 一 个 教育 机 构 门 户 网 站 ,应 包括 学 院 首页 专业 介绍 ,关于 我 们 .最 新 资讯 .联系 
我 们 这 6 个 页 面 。 除 了 学 院 首 页 以 外 .其 他 5 个 页 面 的 风格 是 一 致 的 ,也 就 是 说 ,本 项 目 
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仅 需 要 设计 两 种 网 页 模板 : 首页 模板 和 普通 页 模板 。 

本 项 目 是 一 个 响应 式 网 页 设计 实例 。 响 应 式 Web 设计 (Responsive Webdesign) 的 理念 是 : 
页 面 设计 与 开发 应 当 根 据 用 户 行为 以 及 设备 环境 (系统 平台 、 屏 幕 尺寸 .屏幕 定向 等 ) 进 行 相应 
的 响应 和 调整 。 为 了 适应 多 种 屏幕 (PC 屏幕 .平板 电脑 屏幕 .手机 屏幕 ), 网 站 的 整体 布局 
为 上 .中 、 下 ,如 图 3-15 所 示 。 上 方 为 标题 区 域 ,用 于 显示 网 站 标题 和 导航 ; 中 部 为 内 容 
区 域 ,用 于 放置 页 面 的 具体 内 容 ; 下 方 为 版 权 区 域 ,用 于 放置 网 页 版 权 、 机 构 信 息 。 


标题 导航 


主体 内 容 


网 站 版 权 


图 3-15 网 站 整体 布局 图 


3.4 学 院 首页 


门户 网 站 的 首页 十 分 重要 ,不管 在 视觉 上 还 是 在 内 容 上 ,都 要 能 吸引 浏览 者 。 通 常 采 
用 “ 巨 屏 宣传 画 十 图 文 内 容 ” 的 组 合 方式 。 
页 面 布局 如 图 3-16 所 示 。 


标题 文本 框 “ | | 搜索 


巨 屏 背 景 宣传 画 


图 文 [ex 图 文 | 图 文 


图 图 


Co 


网 站 版 权 


图 3-16 首页 布局 图 
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341 标题 区 域 设 计 


网 页 标题 区 域 分 为 左 、 右 两 个 部 分 ,左边 为 具体 标题 (h1), 布 边 是 搜索 框 ( 表 单 )。 在 
项 目 中 ,利用 Bootstrap 的 navbar-left 和 navbar-right 进行 布局 。 

因为 Bootstrap 的 navbar 系列 样式 都 做 了 media 设置 ,所 以 这 两 个 样式 可 以 根据 屏 
幕 大 小 自 适 应 ( 详 见 Bootstrap. css 文件 中 的 相关 定义 )。 在 屏幕 比较 大 的 情况 下 ,显示 效 
果 如 图 3-17 所 示 。 


XX 网 络 学 院 
图 3-17 大 屏幕 标题 区 效果 图 
在 屏幕 比较 小 的 情况 下 ,显示 效果 如 图 3-18 所 示 。 


XX 网 络 学 院 


图 3-18 小 屏幕 标题 区 效果 图 
具体 代码 如 下 所 示 : 


< div class = "header_bg"> 
< div class = "container"> 
<div class = "row header"> 
<div class = "logo navbar — left"> 
<hl > 
<a href = "index. html"> 
x x 网 络 学 院 
</a> 
</hl > 
</div> 
<div class = "h search navbar - right"> 
< form> 
< input type = "text" class= "text" value = ""> 
< input type = "submit" value = "搜索 "> 
</form> 
</div> 
<div class= "clearfix"> 
</div> 
</div> 
</div> 
</div> 


在 上 述 代 码 中 ,container、row、navbar-left、navbar-right 和 clearfix 是 Bootstrap 中 预 
定义 的 ,header、header-bg 和 h_search 是 自 定义 的 CSS 样式 。 


I 
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相关 的 CSS 代码 如 下 所 示 ( 相 关 解 释 见 注释 ) : 


body{ 

font - family: ' 微 软 雅 黑 '; 
background: # ffffff; 

font — size:100%; 

} 

/* 标题 区 * / 

.header bg{ 

border — top:8px groove# 3b3b3b; 
background: # ffffff; 

} 


.header{ 
padding:2%0; 
} 


.logo hl af 

font — size:1em; 

text — transform:uppercase; /* 强制 大 写 * / 

color: # 3B3B3B; 

text - decoration:none; /* 去 除 超 链 接 下 划 线 * / 
font - family: ' 微 软 雅 黑 '; 

} 


/* search*/ 


.h search{ 
width:30%; /* 使 用 百分制 布局 * / 
position:relative; /* 相对 布局 * / 


margin— top:2%; 
} 


.h_search form{ 
width:100%; 
} 


.h_search form input[type= "text"]{ /x css 属性 选择 器 * / 
font - family: "微软 雅 黑 '…; 

padding:10px 16px; 

outline:none; 

Color:#c6c6c6; 

font — size:13px; 

border:1px solid rgb(236, 236, 236); 

background: # FFFFFF; 


width:73.333 %; /* 使 用 百分制 布局 */ 
line — height :22px; 

position:relative; /* 相对 布局 */ 

} 


.h_search form input[type= "submit"]{ /x* css 属性 选择 器 * / 
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font - family: ' 微 软 雅 黑 '; 


background: # 3B3B3B; /x* 黑色 背景 */ 
color: # ffffFfF; /* 白色 文 字 */ 
text — transform: uppercase; /* 强制 大 写 */ 


font — size:13px; 
padding:12px 18px; 


border :none; /* 去 除 默认 边框 */ 
cursor:pointer; /* 鼠标 光标 样式 (小 手 ) * / 
width:26.333%; /* 使 用 百分制 布局 * / 
position:absolute; /* 使 用 绝对 定位 */ 

line ~ height:1. 5em; 

outline:none; /* 去 除 默认 边框 轮廓 * / 


/* css 过 渡 效 果 , 鼠标 悬 停 后 ,背景 色 渐变 * / 


transition:all0. 3sease — in— out; 


} 


.h_search form input[type= "submit"]:hover{ /* 鼠标 悬 停 样式 * / 
background: # FF5454; /* 红色 背景 */ 
} 
/xxxxx 响应 式 布局 设计 *xxxx/ 
@media only screen and (max— width: 768px) { 
.logo{ 
text ~ align:center; 
} 
.h_search { 
width: 98%; 
padding: 20px; 


} 


342 导航 区 域 设计 


导航 区 域 是 整个 网 站 公用 的 一 个 元 素 。 根 据 响应 式 网 页 的 特性 ,项 目 中 将 导航 区 域 
设计 为 两 种 状态 。 在 屏幕 较 大 的 情况 下 ,显示 所 有 菜单 项 的 内 容 , 如 图 3-19 所 示 。 


图 3-19 大 屏幕 导航 效果 图 


在 屏幕 较 小 的 情况 下 ,隐藏 文字 菜单 项 , 仅 显示 图 标 菜单 项 和 展开 按钮 。 单 击 展开 按 
钮 ,展开 文字 菜单 项 ,如 图 3-20 所 示 。 
该 展开 功能 需要 jQuery. js 与 Bootstrap. js 配合 ,在 网 页 中 应 用 : 


< script type = "text/JavaScript" src = "js/jquery.min.js"></script> 
< script type = "text/JavaScript" src= "js/bootstrap. js"></script > 


相关 HTML 代码 如 下 所 示 : 


<div class = "container"> 
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图 3-20 小 屏幕 导航 效果 图 


< div class = "row h_menu"> 
<nav class = "navbar navbar - default navbar - left" role= "navigation"> 
<! 一 自 适应 移动 设备 -一 > 
<div class = "navbar - header"> 
<button type = "button" class = "navbar - toggle" data - toggle = "collapse" data 一 
target = "#bs— navbar - collapse 一 1"> 
< span class = "icon— bar"> 
</span> 
< span class = "icon 一 bar"> 
</span> 
< span class = "icon 一 bar"> 
</span> 
</button> 
</div> 
<! 一 可 折 释 导航 条 开始 --> 
<div class = "collapse navbar - collapse" id= "bs- navbar — collapse— 1"> 
<ul class = "navnavbar — nav"> 
<1liclass= "active"> 
<a href = "index. html"> 
学 院 主页 
</a> 
</1i> 
<1i> 
<a href = "technology. html"> 
专业 介绍 
</a> 
</1i> 
<1i> 
<a href = "about. html"> 
关于 我 们 
</a> 
</1i> 
<1i> 


<a href = "blog. html"> 
最 新 资讯 
</a> 
</1i> 
<1li> 
<a href = "contact. html"> 
联系 我 们 
</a> 
</1i> 
</ul> 
</div> 
<! 一 可 折 释 导航 条 结束 -一 > 
</nav> 
<! 一 社交 图 标 开始 -一 > 
<div class = "soc iconsnavbar — right"> 
<ul class = "list— unstyledtext — center"> 
<1i> 
<ahref ="#"> 
<iclass= "fa fa- twitter"> 
</i> 
</a> 
</1i> 
<1i> 
<ahref ="#"> 
<iclass= "fafa- facebook"> 
</i> 
</a> 
</1i> 
<1i> 
<a href ="#"> 
<iclass = "fa fa— google 一 plus"> 
</i> 
</a> 
</1i> 
<1i> 
<ahref ="#"> 
<i class = "fa fa- youtube"> 
</i> 
</a> 
</1i> 
用 时 > 
<ahref="#"> 
<iclass= "fa fa- linkedin"> 
</i> 
</a> 
</1i> 
</ul> 
</div> 


<! -一 社交 图 标 结束 -一 > 
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</div> 
</div> 


在 上 述 代码 中 有 一 个 button 元 素 , 其 CSS 样式 为 navbar-toggle。 在 Bootstrap 的 定 
义 中 , 当 屏 幕 宽 度 大 于 768px 时 ,该 样式 自动 隐藏 。 
相关 CSS 样式 如 下 所 示 : 


.h menu{ 
padding:0; 
background: # 3B3B3B; 


/* 巷 盖 bootstrap 的 原始 样式 * / 
.navbar{ 

position:relative; 

min— height:60px; 

margin — bottom:0px7 

border :none; 


/* 著 盖 bootstrap 的 原始 样式 * / 
.navbar — default .navbar - collapse, 
.navbar — default . navbar - form{ 

background: # 3B3B3B; 

color: #ffffff; 

padding:0; 


/* 覆盖 bootstrap 的 原始 样式 x*/ 
.navbar 一 default .navbar - nav >.active>a, 
.navbar — default .navbar - nav> li>a:hover, 
.navbar ~ default .navbar - nav >.active>a, 
.navbar - default . navbar - nav >.active>a:hover{ 
background: # FF5454; 
color: #ffffff; 


/* 覆 盖 bootstrap 的 原始 样式 * / 
.navbar — default .navbar 一 nav> li>a{ 
color: #fff; 
transition:all0. 3s ease— in— out; 


/* 覆盖 bootstrap 的 原始 样式 x*/ 
.nav> 1i{ 


/* 右 侧 边框 颜色 充当 分 隔 线 * / 
border - right:1px solid #272525; 
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/* 覆盖 bootstrap 的 原始 样式 * / 
.nav> 1i>af 
font — size:13px; 
padding:20px 30px; 
text — transform: uppercase; 


} 


/* 社 交 图 标 */ 
.soc_icons{ 


} 


.soc_iconsul{ 
margin — bottom:0; 


} 


.soc_iconsulli{ 
display: inline - block; 

/* 左 侧 边框 颜色 充当 分 隔 线 * / 
border - left:1px solid #272525; 
margin — left: — 3px; 

} 


.Soc_iconsullia{ 

color: #ffffff; 

font - size:24px; 

display:block; /* 改 为 框 元 素 */ 

line— height:60px; 

width:60px; 

height :60px; /x* 行 高 与 高 度 相等 ,单行 文字 垂直 居中 */ 
/* css 过 渡 效 果 , 鼠标 悬 停 后 ,背景 色 渐变 * / 

transition:all 0.3s ease— in— out; 


} 


.soc_icons ul li a:hover{ /* 鼠标 悬 停 样式 * / 
background: # FF5454; 
} 


在 上 述 CSS 定义 中 ,soc_icons 是 一 个 自 定义 样式 。 要 实现 响应 式 布局 ,必须 像 
Bootstrap 一 样 设置 media 规则 (MediaQuries) 。 相 关 代 码 如 下 所 示 : 


/* 响应 式 布局 设计 宽度 小 于 768px 时 的 样式 * / 
@nmedia only screen and (max— width:768px){ 
/* 小 屏幕 时 ,navbar - left 独占 一 行 ,元 素 水 平 居中 * / 
text — align:center; 
.logo{ 
} 
.h_search{ 
width:98%; /* 小 屏幕 时 ,98% 基本 独占 一 行 */ 
padding:20px; 
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.h menu{ 
position:relative; /x* 相对 布局 */ 
} 
.soc_icons{ 
position:absolute; /* 相对 布局 ,元 素 自动 对 其 到 左上 角 */ 
top: Opx; 
background: # 3b3b3b; 
} 


/* 覆 盖 bootstrap 的 原始 样式 * / 
.navbar — default .navbar — toggle{ 
border — color: # FFF; 
. 


/* 巷 盖 bootstrap 的 原始 样式 * / 
.navbar{ 
min— height:51px; 
} 


/* 著 盖 bootstrap 的 原始 样式 * / 
.navbar — default .navbar — collapse, 
.navbar — default .navbar - form{ 
border - color: # 3b3b3b; 
} 


/* 覆盖 bootstrap 的 原始 样式 * / 
.navbar — default{ 
background — color: # 3b3b3b; 
border: none; 


} 


/* 覆盖 bootstrap 的 原始 样式 * / 
.navbar 一 nav{ 
margin:O0px Opx; 
} 


/* 覆 盖 bootstrap 的 原始 样式 */ 
.nav> li>a{ 
padding:20px 15px; 
} 


.Soc_icons ul li af 
font — size:20px; 
line— height:50px; 
width:50px; 
height:50px; /* 行 高 与 高 度 相等 ,单行 文字 垂直 居中 * / 
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巨 


屏 区 域 使 用 了 一 个 名 为 jquery. cslider. js 的 幻灯 片 插件 。 该 插件 能 根据 设 定 的 文 


字 自 动 播放 ,引用 和 调用 都 比较 简单 ,资源 方面 所 需要 的 仅仅 是 一 幅 清 晰 度 较 高 的 图 片 。 
调用 代码 如 下 所 示 : 


< link href = "css/slider. css" rel = "stylesheet" type= "text/css"/> 
< script type = "text/JavaScript" src = "js/jquery.cslider. js"></script> 
< Script type = "text/javaScript"”src = "js/modernizr. custom.28468. js"></script> 


HTML 代码 如 下 所 示 : 


< div class = "slider_bg"> 
<! -- startslider 一 一 > 


< div class = "container"> 


<div id= "da- slider" class = "da- slider text — center"> 


<div class = "da— slide"> 
<h2 > 

第 1 页 幻灯 片 标题 

</h2> 

<p> 

第 1 页 幻灯 片 内 容 

</p> 

<h3 class = "da— link"> 


<ahref ="#" class= "fa— btn btn— lbtn— le"> 


详细 
</a> 
</h3> 
</div> 
<div class = "da— slide"> 
<h2 > 
第 2 页 幻灯 片 标题 
</h2> 
<p> 
第 2 页 幻灯 片 内 容 
</p> 
<h3 class = "da— link"> 


<a href ="#" class= "fa 一 btn btn— lbtn— 1e"> 


详细 
</a> 
</h3> 
</div> 
<div class= "da— slide"> 
<h2> 
第 3 页 幻灯 片 标题 
</h2> 
<p> 
第 3 页 幻灯 片 内 容 
</p> 
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<h3 class= "da— link"> 
<ahref ="#" class= "fa— bt nbtn— lbtn— le"> 
详细 
</a> 
</h3> 
</div> 
<div class = "da— slide"> 
<h2> 
第 4 页 幻灯 片 标题 
</h2> 
<p> 
第 4 页 幻灯 片 内 容 
</p> 
<h3 class = "da— link"> 
<ahref ="#" class= "fa btn btn-1lbtn-1le"> 
详细 
</a> 
</h3> 
</div> 
</div> 
</div> 
</div> 
<! -一 endslider -一 > 


CSS 代码 如 下 所 示 : 


.Slider_ bg{ 


background:url1('. . /images/slider_bg. jpg')no - repeat; 
background - size:100%; 


.slider{ 
padding:4%; 
} 
/x Button1 */ 
.fa 一 btn{ 
font — size: 14px; 
background: none; 
cursor: pointer; 
padding: 12px 40px; 
display: inline - block; 
margin: 10px Opx; 
text — transform: uppercase; 
outline: none; 
position: relative; 
— webkit — transition: all 0. 3s; 
— moz — transition: all 0.3s; 
transition: all 0.3s; 
border - radius: 4px; 
— webkit — border - radius: 4px; 
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一 moz 一 border 一 radius: 4px; 
一 0 一 border — radius: 4px; 
} 
.fa 一 btn:after { 
content: '"'; 
position: absolute; 
z= index: 一 17 
— webkit — transition: all 0.3s; 
— moz— transition: all 0.3s; 
transition: all 0.3s; 
} 
-bta=11{ 
border: 2px solid # ff5454; 
color: #3b3b3b; 
} 
/* Button le */ 
.btn-1le{ 
overflow: hidden; 
} 
.btn— le:after { 
width: 100%; 
height: 0; 
top: 50%; 
left: 50%; 
background: #ff5454; 
‘opacity: 0; 
— webkit — transform: translateX( - 50% ) translateY( ~ 50% ) rotate(45deg); 
— moz — transform: translateX( ~- 50% ) translateY( — 50 % ) rotate(45deg); 
—ms— transform: translateX( —- 50% ) translateY( ~ 50 % ) rotate(45deg); 
transform: translateX( ~ 50% ) translateY( ~ 50 % ) rotate(45deg); 
} 
‘btn— le:hover, .btn— le:active { 
color: #fffffF; 
text - decoration:none; 
} 
.btn— le:hover:after { 
height: 260%; 
‘opacity: 1; 
} 
.btn— le:active:after { 
height: 400%; 
opacity: 1; 
} 


配置 了 幻灯 片 HTML 代码 和 CSS 代码 之 后 ,通过 如 下 JavaScript 语句 启动 幻灯 片 
自动 播放 功能 : 
< Script type = "text/JavaScript"> 


$ (function(){ 
$ ('#da— slider').cslider({ 
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autoplay:true, 
bgincrement:450 
DD); 

}); 


</script> 
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该 部 分 是 一 个 4 列 的 图 文 区 域 ,每 列 由 图 片 .标题 .内容 组 成 。 因 此 ,该 部 分 既 要 对 每 
列 进行 响应 式 布局 (使 用 Bootstrap 的 栅 格 系统 ) ,又 要 对 每 列 内 部 的 元 素 布 局 ,效果 图 如 
图 3-21 所 示 。 


© © QO oO 


软件 技术 专业 计算 机 信息 管理 专业 。 物 联网 应 用 技术 专业 网 络 营销 专业 


地 专业 洁 基 本 从 事 黎 罗网 系 绒 身 用 与 营 。。。 玉 吾 业 增 关 本 乱 应 用 计算 机 网 结 坦 行 击 
理 多 联网 系统 信 三 和 
不 支持 、 物 联网 系统 天 Py 
人 QI 人 89 磺 和 寺 放 中 


"= | 


图 3-21 图 文 区 域 1 效果 图 
相关 HTML 代码 如 下 所 示 : 


<div class = "main_bg"> 
<! -— Startmain 一 一 > 
< div class = "container"> 
<div class = "main row"> 
<div class= "col - md- 3images 1 of 4 text— center"> 
< span class = "bg"> 
<iclass= "fa fa- globe"> 
</i> 
</span> 
<h4> 
<ahref =" 井 "> 
第 1 列 标题 
</a> 
</h4> 
<p class = "para"> 
第 1 列 内 容 
</p> 
<a href ="#" class= "fa— btn btn—1 btn— le"> 
更 多 
</a> 
</div> 
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<div class= "col -md—3 images 1 of 4bgl text— center"> 
< span class = "bg"> 
<iclass= "fa fa— laptop"> 
</i> 
</span> 
<h4> 
<ahref ="#"> 
第 2 列 标题 
</a> 
</h4> 
<p class = "para"> 
第 2 列 内 容 
</p> 
<ahref ="#" class= "fa— btn btn—1 btn— 1e"> 
更 多 
</a> 
</div> 
<divclass="col -md—3 images 1 of 4 bgl text— center"> 
< span class = "bg"> 
<iclass= "fa fa 一 cog"> 
</i> 
</span> 
<h4> 
<a href ="#"> 
第 3 列 标题 
</a> 
</h4> 
<p class = "para"> 
第 3 列 内 容 
</p> 
<a href ="#" class= "fa 一 btn btn—1 btn— le"> 
更 多 
</a> 
</div> 
<div class = "col - md-3 images_1 of 4 bgl text — center"> 
< span class = "bg"> 
<iclass= "fa fa- shield"> 
</i> 
</span> 
<h4> 
<a href ="#"> 
第 4 列 标题 
</a> 
</h4> 
< 了 p class = "para"> 
第 4 列 内 容 
</p> 
<ahref ="#" class= "fa 一 btn btn 一 1 btn— le"> 
更 多 


I 
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</a> 
</div> 
</div> 
</div> 
</div> 
<! —— endmain -一 > 


相关 CSS 代码 如 下 所 示 : 


/* startmain*/ 
.main bg{ 
background: # ffffff; 


.main{ 
padding:5%0; 


.images 1 of 4img{ 
display: inline - block; 


.images 1_ of 4h4{ 
margin:30px 0 15px; 


.images_1_of 4h4a{ 
display: inline — block; 
color: # 353535; 
font — size:1.5em; 
font - family: ' 微 软 雅 黑 '; 
text — transform: uppercase; 
— webkit — transition:all 0.3 sease— in- out; 
— moz— transition:all 0.3 sease— in— out; 
-0- transition:all 0.3 sease— in— out; 


transition:all 0.3 sease— in— out; 


.images_1_of 4 h4 a:hover{ 
text - decoration:none; 
color: #ff5454; 


. images_ 1_of 4 span{ 
width:120px; 
height:120px; 
display:block; 
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text — align:center; 


margin:0 auto; 


“bg{ 
background: # 3b3b3b; 
— webkit — transition:all 0.3 sease— in— out; 
— moz— transition:all 0.3 sease— in— out; 
-0o- transition:all 0.3 sease— in— out; 
transition:all 0.3 sease— in- out; 
border — radius:75px; 
— webkit — border — radius:75px; 
— moz — border — radius:75px; 
— 0- border — radius:75px; 


. images_1_of 4 span i{ 
font - size:6em; 
color: #e0e0e0; 
line — height:2em; 
text - shadow: 1px 1px 0px # 3b3b3b; 
— webkit — text — shadow:1px 1px 0px # 3b3b3b; 
一 moz — text — shadow:1px 1px 0px # 3b3b3b; 
— 0- text— shadow:1px 1px 0px # 3b3b3b; 
—ms— text— shadow:1px 1px 0px # 3b3b3b; 


.para{ 
font - size:14px; 
line— height:1. 8em; 
color: #868686; 


.images_1_of 4 af 
position:relative; 
z— index:1; 


} 
响应 式 布 局 代码 如 下 所 示 : 


@nedia only screen and (max— width:1024px){ 
. images_1_of 4h 4a{ 
font - size:1. 2em; 


.Ppara{ 
font — size:13px; 


I 
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@media only screen and (max— width:768px){ 
.main{ 
padding:4 % 0; 
} 


.images 1 of 4{ 
margin— bottom:4$%; 
} 
} 


@media only screen and (max — width:480px){ 
.images_1 of 4 h4{ 
margin:20px 0 10px; 
} 
} 


@media only screen and (max— width:320px){ 
.main{ 
padding:8% 2%; 
} 


.images 1 of 4 h4{ 
margin:15px010px; 
} 


.images 1 of 4 span{ 
width:88px; 
height:88px; 

} 


.images 1 of 4 spani { 
font — size:5em; 
line— height:1. 8em; 


} 


.images_1_of 4 h4 af 
font - size:1em; 


} 
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该 部 分 是 一 个 两 列 图 文 区 域 。 其 中 ,左边 区 域 仅 有 图 片 , 右 边区 域 仅 有 标题 和 内 容 。 
效果 图 如 图 3-22 所 示 。 
相关 HTML 代码 如 下 所 示 : 


常州 工程 职业 技术 学 院 是 隶属 于 江苏 省 教育 厅 的 
等 学 校 


图 3-22 ”图 文 区 域 2 效果 图 


<div class= "main row"> 
<divclass= "col -md— 6 content left"> 
< img src = "images/picl. jpg" alt = "" class = "img— responsive"> 
</div> 
<divclass= "col -md- 6 content right"> 
<h4> 
右 侧 标题 
</h4 > 
<p class = "para"> 
右 侧 正文 
</p> 
<a href ="#" class= "fa 一 btn btn 一 1 btn-1le"> 
更 多 
</a> 
</div> 
</div> 


相关 CSS 代码 如 下 所 示 : 


.content_right h4{ 
color: #353535; 
font - size:2. 5em; 
font - family: ' 微 软 雅 黑 '; 
line- height:1. 5em; 


. content_right h4 span{ 
color: #ff5454; 


.content_right af 
position:relative; 


z— index:1; 
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这 是 一 个 4 列 图 文 区 域 。 与 图 文 区 域 1 不 同 , 该 部 分 的 内 容 使 用 了 owl. carousel. js 
这 个 JavaScript 插件 ,实现 了 滚动 效果 ,如 图 3-23 所 示 。 


优秀 学 员 09 优秀 学 员 10 优秀 学 员 11 优秀 学 员 12 


轩 1 蜂 音 业 本， 区 全 同人 好 人 机 几 党 北 生 ， 焉 公司 他 败 人 I 必 直 生 下 公 且 他 的 人 01 必 半 二 生 ,更 公 国 他 由 人 


图 3-23 图 文 区 域 3 效果 图 


使 用 这 个 插件 ,第 一 步 需 要 从 网 站 上 下 载 资源 文件 包 , 解 压 后 放 到 项 目 文件 中 ,第 二 
步 需要 在 html 文件 中 引用 相关 文件 ,并 用 一 段 javascrpit 程序 启动 。 


<! -- Owl Carousel Assets 一 一 > 
< link href = "css/ow]l. carousel.css" rel = "stylesheet"> 
< script src = "js/owl. carousel. js"></script> 
< Script> 
$ (document) .ready(function() { 


$ (" 井 owl - demo").owlCarousel({ 
items : 4, 
lazyLoad : true, 
autoPlay : true, 
navigation : true, 
navigationText : [""，""]， 
rewindNav : false, 
scrollPerPage : false, 
pagination : false, 
paginationNumbers : false, 

D); 

DD); 


</script > 
第 三 步 , 相 关 HTML 代码 如 下 所 示 : 
<! --- 一 旋转 木马 ----> 


<div id = "ow] ~ demo" class = "owl] - carousel text ~ center"> 
<div class= "item"> 
<div class= "cau left"> 
< img class = "lazyOwl" data - src = "images/cl1. jpg" alt=""> 
</div> 
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< div class = "cau left"> 
<h4> <a href =" 井 "> 优秀 学 员 01 </a></h4> 
<p>2011 届 毕 业 生 , x x 公司 创始 人 </p> 
</div> 
</div> 
<div class= "item"> 
<div class = "cau left"> 
< img class = "lazyOwl" data— src = "images/c2. jpg" alt = ""> 
</div> 
<div class= "cau left"> 
<h4> 
<ahref ="#"> 
优秀 学 员 02 
</a> 
</h4> 
<p> 
2011 届 毕 业 生 ,x x 公司 创始 人 
</p> 
</div> 
</div> 
<div class= "item"> 
<div class = "cau left"> 
< img class = "lazyOwl" data— src = "images/c3. jpg" alt= ""> 
</div> 
< div class = "cau left"> 
<h4> 
<ahref ="#"> 
优秀 学 员 03 
</a> 
</h4 > 
<p> 
2011 届 毕 业 生 , x x 公司 创始 人 
</p> 
</div> 
</div> 
<div class= "item"> 
<div class = "cau left"> 
< img class = "lazyOwl" data— src = "images/c4. jpg" alt = ""> 
</div> 
<div class= "cau left"> 
<h4> 
<ahref ="#"> 
优秀 学 员 04 
</a> 
</h4 > 
<p> 
2011 届 毕 业 生 , x x 公司 创始 人 
</p> 
</div> 
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</div> 
<div class = "item"> 
<div class = "cau left"> 
< img class = "lazyOwl" data— src = "images/c5. jpg" alt = ""> 
</div> 
<div class= "cau left"> 
<h4> 
<ahref ="#"> 
优秀 学 员 05 
</a> 
</h4> 
<p> 
2011 届 毕 业 生 , x x 公司 创始 人 
</p> 
</div> 
</div> 
<div class = "item"> 
< div class = "cau left"> 
< img class = "1azyOwl" data— src = "images/c6. jpg" alt= ""> 
</div> 
<div class = "cau left"> 
<h4> 
<ahref ="#"> 
优秀 学 员 06 
</a> 
</h4> 
<p> 
2011 届 毕 业 生 , x x 公司 创始 人 
</p> 
</div> 
</div> 
</div> 


在 上 述 代码 中 ,创建 了 6 个 样式 为 Item 的 节点 ,用 于 体现 滚动 效果 。 

第 四 步 ,如 果 需 要 ,编写 相关 CSS 代码 。 本 例 的 owl. carousel. js 这 个 java Script 插 
件 已 经 自 带 CSS 文件 owl. carouselcss ,读者 无 需 自己 编写 。 

以 上 的 四 个 步骤 也 是 在 网 页 中 引用 插件 的 一 般 性 步骤。 

响应 式 布局 代码 如 下 所 示 : 


@media only screen and (max— width:1440px) and (min— width:1366px){ 
.Owl — carousel{ 
width:95%; 
margin:0 auto; 
padding:2%; 


} 


@media only screen and (max— width:1366px) and (min— width:1280px){ 
.Owl — carousel{ 
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width:95%; 
margin:0 auto; 
padding:2%; 


@media only screen and (max— width:1280px) and (min— width:1024px){ 
,OWwl — carousel{ 
width:95%; 
margin:0 auto; 
padding:2 委 7 


@media only screen and (max- width:1024px) and (min— width:768px){ 
.OW] — carousel{ 
width:95%; 
margin:0 auto; 
padding:2%; 


@media only screen and (max— width:800px) and (min - width:640px){ 
.OWl — carousel{ 
width:95%; 
margin:0 auto; 
padding:2%; 


@media only screen and (max— width:640px) and (min - width:480px){ 
.Owl — carousel{ 
width:95%; 
margin:0 auto; 
padding:2%; 


@media only screen and (max- width:480px) and (min - width:320px){ 
.OWwl — carousel{ 


} 


@media only screen and (max- width:320px) and (min - width:240px){ 
.owl - carousel{ 


| 


#owl - demo. itemimg{ 
width:40% ; 
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margin:0 auto; 
text — align:center; 


} 


有 关 owl. carousel. js, 在 其 官方 网 站 (http://www. owlgraphic. com/owlcarousel/) 
上 有 详细 的 使 用 说 明 ,请 读者 自行 学 习 。 
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版 权 区 的 内 容 就 是 文字 ,所 以 只 需要 设置 定位 方式 以 及 内 部 文字 元 素 的 样式 即 可 。 
效果 图 如 图 3-24 所 示 。 


日 版 权 所 有 常州 工程 职业 技术 学 综 


图 3-24 版 权 区 域 效果 图 
相关 HTML 代码 如 下 所 示 : 


<div class = "footer bg"> 
<! -- startfooter 一 一 > 
< div class = "container"> 
< div class = "row footer"> 
< div class = "copy text - center"> 
<p class = "link"> 
< span> 
&# 169; 版 权 所 有 
<a href = "http://www.czie.net/" target = " blank" title= "常州 工程 职业 技术 学 院 "> 
常州 工程 职业 技术 学 院 
</a> 
</span> 
</p> 
</div> 
</div> 
</div> 
</div> 


相关 CSS 代码 如 下 所 示 : 


.footer bg{ 
background: # £6f6f6; 
} 


.footer{ 
padding:4%; 
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} 


:copy p{ 
color: # 3b3b3b; 
font — size:14px; 
line— height:1. 8em; 
} 


.copy pa{ 
color: #ff5454; 
transition:all 0.3 sease— in- out; 


} 


.Copy p a:hover{ 
color: # 3b3b3b; 
text — decoration:none; 


3.5 专业 介绍 页 面 


专业 介绍 页 面 是 一 个 典型 的 列表 型 网 页 ,以 列表 的 形式 展示 多 项 内 容 , 通 常情 况 下 需要 
“分 页 ”。 为 了 让 浏览 者 在 列表 中 预览 某 个 专业 的 简介 ,在 列表 项 中 增加 简介 文字 和 图 片 。 
页 面 布局 如 图 3-25 所 示 。 


标题 文本 框 _ | | 搜索 


导航 


页 面 标题 


专业 名 称 


专业 简介 图 片 


详细 


专业 名 称 


专业 简介 | 图 片 


详细 


分 页 


网 站 版 权 


3-25 ”专业 介绍 页 布局 图 


[更 B3 进 
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专业 介绍 页 的 网 页 标题 区 和 版 权 区 与 首页 基本 一 致 ,唯一 不 同 的 是 ,在 网 页 标题 区 


使 用 了 一 个 背景 图 片 ,该 图 片 在 首页 被 用 于 巨 屏 幻灯 。 
体 性 。 
具体 HTML 代码 如 下 所 示 : 


<div class = "header bgl"> 
<div class= "container"> 
<div class = "row header"> 
<div class = "logo navbar — left"> 
<hl > 
<a href = "index. html"> 
x x 网络 学 院 
</a> 
</hl > 
</div> 
< div class = "h_search navbar - right"> 


< form> 


< input type = "text" class= "text" value= " 
< input type = "submit" value = "搜索 "> 
</form> 

</div> 

< div class = "clearfix"> 

</div> 

</div> 
</div> 
</div> 


这 样 设计 有 助 于 提高 网 站 的 整 


"> 


上 述 代码 中 ,将 最 外 层 的 样式 改 为 header_bg1( 首 页 中 为 header_bg)。 相 关 的 CSS 


代码 如 下 所 示 : 


.header bgl{ 
border - top:8px groove # 3b3b3b; 


background:url('. . /images/slider bg. jpg') no - repeat left; 


background - size:100%; 
} 
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该 图 文 区 域 包含 一 个 专业 的 介绍 ,包括 专业 名 称 、 专 业 简 介 、 图 片 、 超 链接 按钮 。 效 果 


图 如 图 3-26 所 示 。 
相关 HTML 代码 如 下 所 示 : 


< div class = "technology row"> 


工 软件 技术 专业 
培养 目标 : 本 专业 培养 四 从 事 电脑 软件 、 手 机 软件 或 说 入 式 设 备 软件 的 开发 、 济 研 、 交 施 、 堆 护 、 服 务 和 绩 信 等 方面 的 工作 , 具备 良好 职业 素 
质 的 高 素质 技能 型 应 用 人 才 - 


主干 课 得 : 点 面 软件 开发 、WEB 应 用 开发 、 软 件 二 次 开发 都 动 应 用 开发 说 入 式 Linux 二 用 程序 设计 、 廊 入 式 系统 软件 开发 、wince 技 术 与 
应 用 、 说 入 丈 产 品 生产 /研发 详 溃 、 软 件 单元 及 集成 荔 坛 、 欢 件 系 皖 军旗 、 软 件 项 目 坟 施 与 产品 将 护 、 软 件 产品 梢 入 与 市 场 开 汉 等 . 


我 业 面向 : 毕业 生 我 业主 要 面向 长 三 角 地 区 的 IT 半 企业， 从 事 电脑 软件 、 手 机 软件 或 激 入 式 没 备 软件 的 开发 、 姓 武文 施 、 准 护 和 抽 入 相关 的 
工作 .区 业 匡 疝 帘 ,社会 人 才 瑚 求 量 大 , 旦 从 业 识 位 有 良好 的 工作 环境 和 广 二 发展 前 景 。 近 年 不 短 荐 电子 商务 的 筷 径 发 展 ,更 是 为 本 专业 学 


生 开拓 了 一 条 从 事 电 了 商务 相关 工作 的 广 辣 器 至 


[| 


图 3-26 图 文 区 效果 图 


<h2> 
热门 专业 
</h2> 
<div class = "technology list"> 
<h4> 
专业 1 名 称 
</h4 > 
<div class = "col — md— 10 tech para"> 
<p class = "para"> 
专业 1 介绍 文字 
</p> 
</div> 
<div class= "col -md-2 images 1 of 4 bgl pull- right"> 
<span class= "bg"> 
< iclass = "fa fa- files-o"> 
/ly 
</span> 
</div> 
<div class= "clearfix"> 
</div> 
<div class = "read more"> 
<a href = "single ~ page. html" class = "fa— btn btn 一 1 btn- le"> 
详细 
</a> 
</div> 
</div> 
<div class= "technology_list"> 
<h4> 
专业 2 名称 
</h4> 
<div class = "col- md- 10 tech para"> 
<pclass= "para"> 
专业 2 介绍 文字 
</p> 


I 
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</div> 
<div class= "col-md- 2 images 1 of 4 bgl pull- right"> 
< span class = "bg"> 
<iclass= "fa fa- files—-o"> 
</i> 
</span> 
</div> 
<div class= "clearfix"> 
</div> 
<div class= "read more"> 
<ahref ="#" class= "fa 一 btn btn—1 btn— le"> 
详细 
</a> 
</div> 
</div> 
<div class= "technology list"> 
<h4> 
专业 3 名 称 
</h4 > 
<div class = "col — md— 10 tech para"> 
<p class= "para"> 
专业 3 介绍 文字 
</p> 
</div> 
<div class="col -md-2 images 1 of 4 bgl pull— right"> 
< span class = "bg"> 
< iclass= "fa fa 一 files 一 o"> 
</i> 
</span> 
</div> 
<div class= "clearfix"> 
</div> 
<div class = "read more"> 
<a href ="#" class= "fa— btn btn—1 btn— le"> 
详细 
</a> 
</div> 
</div> 
</div> 
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上 述 代码 中 ,第 1 个 专业 的 介绍 都 放 在 一 个 样式 为 technology_list 的 div 中 。 其 中 ， 
上 面部 分 是 专业 名 称 (h4); 中 间 部 分 使 用 Bootstrap 的 栅 格 系统 (col-md-10 .col-md-2) 
分 别 放置 说 明文 字 和 图 片 ; 下 面部 分 是 一 个 “更 多 ”的 超 链接 按钮 ,其 定义 与 首页 中 的 


一 致 。 
相关 CSS 代码 如 下 所 示 : 
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/* start technology* / 
.technology{ 
padding:4% 0; 


.technology h2{ 
margin:0 0 20px; 
text — transform:capitalize; 
font — size:3em; 
color: # 3b3b3b; 
font - family: ' 微 软 雅 黑 '; 


.technology h4{ 
font — size:22px; 
color: #5b5b5b; 
font - weight:100; 
text ~ transform:capitalize; 
display:block; 
margin:10px 0 8px; 


.tech para{ 
padding — left:0; 
padding — right:0; 


.technology listl{ 
margin — top:20px; 
} 


响应 式 布局 代码 如 下 所 示 : 


@media only screen and (max— width:768px){ 
.technology{ 
padding:4%; 
} 
.technology h4{ 
font — size:20px; 


} 
@media only screen and (max— width:640px){ 
.technology h4A{ 
font — size:17px; 


@media only screen and (max— width:480px){ 
.technology h2{ 
font — size:2em; 
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@media only screen and (max— width:320px){ 
.technology h4{ 
font — size:14px; 
line— height:1.5em; 


} 
分 页 区 域 直接 使 用 Bootstrap 的 组 件 pagination 来 实现 ,代码 如 下 所 示 : 


<ul class = "pagination"> 

<1i> 
<a href ="#"> 
&laquo; 
</a> 

</li> 

<1i> 
<a href ="#"> 
时 
</a> 

</1i> 

<1i> 
<a href ="#"> 
2 
</a> 

</1i> 

<1i> 
<a href ="#"> 
3 
</a> 

</1i> 

<1i> 
<a href ="#"> 
4 
</a> 

</li> 

<1li> 
<a href ="#"> 
5 
</a> 

</1i> 

<1i> 
<a href ="##"> 
&raquo; 
</a> 

</1i> 

</ul > 
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3.6 “关于 我 们 ”页 面 


“关于 我 们 ”这 个 页 面 是 每 个 网 站 都 需要 的 。 页 面 中 的 内 容 要 尽 可 能 简单 、 明 了 ,让 浏 
览 者 很 方便 地 获取 所 需 信息 。 效 果 图 如 图 3-27 和 图 3-28 所 示 。 


关于 我 们 


无 加 市 现代 远程 数 育 中 心里 无 名 市 广 再 电视 大 学 学 办 . 2003 年 既 无 坦 市 教育 局 礼 人 成立 、 江 苏 商 教 育 厅 备 吉 .与 国内 多 所 知名 高 校 合作 开展 面向 无 覃 地 区 网 络 专 、 本 科学 
历 孝 育 和 韭 学 历 培 训 9 办 学 单位 中 心 以 提 范 的 教学 管理 和 做 折 的 子 报 务 多 次 训 1 

并 入 得 了 ISO9000 国 际 于 最 管理 体系 认 征 的 办 学 机 构 。 目 前 中 心 时 无 旭 地 区 基 大 的 更 代 于 各 才 育 学 习 中 心 、 秆 理 中 心 和 资源 中 心 , 已 

余 名 的 各 级 各 类 应 用 型 人 才 . 


报 专 畔 拉 点 本 科 丘 具备 国民 寺 育 系列 的 专科 上 专科 [上 年 业 还 书 ; 村 训 中 且 点 专 料 、 离 中 起点 节 村 项 具 备 医 训 承认 的 两 中 、 中 专 及 以 上 洱 历 的 毕业 证 书 。 通 过 报名 资格 验 
自主 司 加 的 入 学 考试 后 录取. 


报 各 时 渗 本 人 竺 业 证 书 和 身份 证 课件 、 复 印 什 各 下 亲近 罗网 朗 免 于 和 色 向 片 ( 两 了 ) FS。 及 罗 不 琅 合 条件 的 毕业 证 书 或 和 下 件 有 纸 名 入 季 后 一 既 办 证 机 出 的 后 昌 自 
可 年 春季 招生 丙 名 9 月 于 次 年 2 月 ; 秋季 所 各 3 月 三 8 月 
学 制 ; 高 中 起 点 专科 、 吉 科 起 点 本 村 2.5 年 ,页 ， 


毕业 bi 正 书 国友 教育 可 电子 注册 ,国家 子 以 承认 . 


更 多 


图 3-27 “关于 我 们 ”上 部 分 效果 图 


根据 在 职 人 员 的 特点 ， 采 用 基于 互联 网 的 分 散 式 教 
学 模式 ， 集 中 授课 为 辅 。 

亲生 利用 业 他 时 亲 可 随时 箭 地 地 通辽 互联 网 或 光盘 学 习 课程 ， 并 通过 参加 去 时 和 
和 立时 的 于 旺 铺 号 ， 每 子 基 参加 由 子 校 组 人 的 在 无 覃 市 现代 远程 育 中 直行 的 
到 机 不 当 试 


3-28 “关于 我 们 ”下 部 分 效果 图 


页 面 布局 如 图 3-29 所 示 。 

在 “关于 我 们 ”页面 中 ,上 方 的 整 行 图 文 布局 使 用 的 是 首页 中 定义 的 main_bg 样式 ,下 方 
分 为 左右 两 个 部 分 (使 用 Bootstrap 中 的 栅 格 系统 col-md-6) ,布局 使 用 的 是 main_btm 样式 。 

相关 HTML 代码 如 下 所 示 : 


<! -- start main 一 一 > 
<div class = "main bg"> 
<div class= "container"> 
<div class= "about row"> 
<h2> 
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图 3-29 “关于 我 们 ”页 面 布局 图 


关于 我 们 
</h2> 
<p class = "para"> 
上 方正 文 
</p> 
<ahref ="#" class="fa- btn btn 一 1 btn— 1e"> 
更 多 
</a> 
</div> 
</div> 
</div> 
<! -— end main 一 一 > 
< div class = "main btm"> 
<! —— start main_btm 一 一 > 
<div class = "container"> 
< div class = "main row"> 
< div class = "col - md- 6 content_left"> 


< imgsrc = "images/picl. jpg" alt= "" class= "img- responsive"> 


</div> 

<div class= "col -md—6 content right"> 
<h4> 
右 下 方 标题 
</h4> 


<p class = "para"> 
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右 下 方正 文 
</p> 
<ahref ="#" class= "fa 一 btn btn 一 1 btn— le"> 
更 多 
</a> 

</div> 

</div> 
</div> 


</div> 
相关 CSS 代码 如 下 所 示 : 


/* start about * / 
.about{ 
padding:4% 0; 
} 
.abouth 2{ 
margin:0 0 20px; 
text - transform:capitalize; 
font - size: 3em; 
color: # 3b3b3b; 
font - family: ' 微 软 雅 黑 '; 
} 
.about af 
position: relative; 
z— index:1; 


} 
响应 式 布局 代码 如 下 所 示 : 


@media only screen and (max- width:768px){ 
.about{ 
padding:4%; 
} 
@media only screen and (max— width:480px){ 
.about h2{ 
font — size:2em; 


} 


3.7 最 新 资讯 页 面 


最 新 资讯 页 和 之 前 的 专业 介绍 页 比较 类 似 ,都 是 列表 型 网 页 ,集中 展示 多 项 相似 内 
容 。 因 为 资讯 的 内 容 比 专业 介绍 的 内 容 要 丰富 一 些 , 所 以 把 该 网 页 设计 得 更 丰富 一 些 。 
在 网 页 的 内 容 区 域 做 一 个 局 部 的 左右 布局 。 

页 面 布局 如 图 3-30 所 示 。 
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图 3-30 ”最 新 资讯 页 面 布 局 图 


371 资讯 区 域 设计 
资讯 区 包括 标题 ,图片 .内容 及 更 多 按钮 ,效果 图 如 图 3-31 所 示 。 


Javascript 简 介 


) 月 5 日 。 物资 


JavaScript 一 种 直译 式 基本 语言 ， 是 一 种 动态 类型、 能 类 型 、 基 于 原型 的 语言 ， 内 办 支持 类 型 。 它 的 解 程 器 
被 称 为 JavasScript 引 区 ,为 浏览 串 的 一 部 分 ,广泛 用 于 客户 庄 的 脚本 语言 ， 最 早 是 在 HTML ( 标准 通用 标记 
语言 下 的 一 个 应 用 ) 网 页 上 使 用 ， 用 来 给 HTML 网 页 增加 动态 功能 . 


图 3-31 资讯 区 域 效果 图 
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相关 HTML 代码 如 下 所 示 : 


<divclass="col — md- 8 blog left"> 
<h4> 
<a href ="#"> 
资讯 标题 
</a> 
</h4 > 
<ahref="#"> 


"" class = "blog imgimg— responsive"/> 


< img src = "images/blog picl. jpg" alt = 
</a> 
<div class= "blog list"> 
<ul class= "list— unstyled"> 
<1i> 
<iclass= "fa fa- calendar - o"> 
</i> 
<span> 
发 布 时 间 
</span> 
</li> 
<1i> 
<a href ="#"> 
<iclass= "fa fa- comment"> 
</i> 
<span> 
资讯 类 别 
</span> 
</a> 
</1i> 
<1i> 
<ahref ="#"> 
<iclass= "fa fa- user"> 
</i> 
<span> 
发 布 人 
</span> 
</a> 
</1i> 
<1i> 
<a href ="#"> 
<iclass= "fa fa- eye"> 
</i> 
<span> 
阅读 人 数 
</span> 
</a> 


I 
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</1i> 
</ul> 
</div> 
<p class= "para"> 
资讯 正文 
</p> 
<div class = "read more"> 
<a href ="#" class= "fa— btn btn—1 btn- 1e"> 
更 多 
</a> 
</div> 
<h4> 
<a href ="#"> 
资讯 标题 
</a> 
</h4 > 
<a href ="#"> 
< img src = "images/blog_pic2. jpg" alt ="" class = "blog_imgimg — responsive"/> 
</a> 
<div class= "blog list"> 
<ul class= "list— unstyled"> 
<1i> 
<iclass= "fa fa- calendar - o"> 
</i> 
<span> 
发 布 时 间 
</span> 
</1i> 
<1i> 
<ahref="#"> 
<iclass= "fa fa 一 comment"> 
</i> 
<span> 
资讯 类 别 
</span> 
</a> 
</1i> 
<1i> 
<ahref ="#"> 
<iclass= "fa fa 一 user"> 
</i> 
<span> 
发 布 人 
</span> 
</a> 
</1i> 
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<1i> 
<ahref="#"> 
<iclass= "fa fa 一 eye"> 
</i> 
<span> 
阅读 人 数 
</span> 
</a> 
</1i> 
</ul> 
</div> 
<p class= "para"> 
资讯 正文 
</p> 
< div class = "read more"> 
<ahref ="#"class="fa- btn btn 一 1 btn— 1e"> 
更 多 
</a> 
</div> 


</div> 
相关 的 CSS 代码 如 下 所 示 : 


.blog_ left{ 
display:block; 


.blog_img{ 
margin:4% 02%; 


.blog_left img{ 
width:100%; 


.blog_left h4 af 
margin:0 0 20px; 
display:block; 
text — transform:capitalize; 
font — size:1.5em; 
color: # 3b3b3b; 
font - family: "微软 雅 黑 '; 
— webkit — transition:all 0.3 sease— in— out; 
一 moz 一 transition:all 0.3 sease 一 in 一 out; 


一 o 一 transition:all 0.3 sease 一 in 一 out; 
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transition:all 0.3 sease— in— out; 


‘blog left h4 a:hover{ 
text — decoration:none; 
color: #ff5454; 


.blog list{ 
} 


.blog list ul 1i{ 
display: inline - block; 
margin — left:10px; 


‘blog list ul li:first 一 child{ 
margin 一 left:0; 


.blog list li af 
display:block; 
padding:4px 8px; 
color: # b6b6b6; 
text — transform:capitalize; 


.blog_list ul 1i if 
font — size:15px; 
color: #b6b6b6; 


.blog list 1i span{ 
padding - left:10px; 
font - size:14px; 
color: # b6b6b6; 


.blog_list 1i span:hover, .blog_list li a:hover{ 
color: #ff5454; 


text — decoration:none; 


.read more a{ 
position:relative; 


z-index:1; 
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} 
响应 式 布局 代码 如 下 所 示 : 


@media only screen and (max— width:480px){ 


.blog left h4 af 
font — size:1lem; 


} 


.blog list ul 1i{ 
margin— left:S5px; 
} 


.blog list lia{ 
padding:4px 4px; 
} 
} 


@nmedia only screen and (max— width:320px){ 


.blog list ul li:nth- child(3){ 
margin— left:0; 
} 
} 
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侧 边 区 域 从 上 到 下 依次 为 资讯 统计 、 广 告 位 资讯 标签 、 邮 件 订阅 。 效 果 图 如 图 3-32 一 


图 3-34 所 示 。 


2K 


5K 


关注 


15 长 
订阅 


10K 


图 3-32 ”资讯 统计 效果 图 


相关 HTML 代码 如 下 所 示 : 


<div class = "col-md- 4 blog right"> 
<div class = "social network likes"> 
<ul class= "list— unstyled"> 
<1i> 


<ahref ="#" class= "tweets"> 


<div class= "followers"> 
<p> 
<span> 
2K 
</span> 
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图 3-33 ”广告 位 效果 图 


邮件 订阅 


请 输入 Email 地 址 


3-34 标签 区 域 及 邮件 订阅 区 域 效果 图 
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好 友 
</p> 
</div> 
<div class = "social network"> 
<iclass= "twitter 一 icon"> 
</i> 
</div> 
</a > 
</1i> 
<1i> 
<a href ="#" class= "facebook — followers"> 
<div class= "followers"> 
<p> 
<span> 
5K 
</span> 
关注 
</p> 
</div> 
< div class = "social_network"> 
<iclass= "facebook - icon"> 
</i> 
</div> 
</a> 
</li> 
> 
<a href ="#"class = "email"> 
<div class = "followers"> 
<p> 
<span> 
7.5K 
</span> 
订阅 
</p> 
</div> 
<div class = "social network"> 
<iclass= "email— icon"> 
</i> 
</div> 
</a> 
</1i> 


<li> 


I 
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<a href ="#" class= "dribble"> 


<div class = "followers". 
<p> 
<span> 
10K 
</span> 
好 友 
</p> 
</div> 


> 


<div class= "social network"> 


<iclass= "dribble- icon"> 


</i> 
</div> 
</a> 
</1i> 
< div class = "clear"> 
</div> 
</ul> 


</div> 


<ul class = "ads navlist — unstyled"> 


<h4> 
广告 
</h4 > 
<11> 
<ahref ="#"> 
< img src = "images/ads_pic. 
</a> 
</li> 
<1i> 
<ahref="#"> 
< img src = "images/ads_pic 
</a> 
</1i> 
<1i> 
<ahref="#"> 
< img src = "images/ads_pic 
</a> 
</1i> 
> 
<ahref="#"> 
< img src = "images/ads pic 


</a> 


.jpg" alt=""> 


.jpg" alt=""> 


.jpg" alt =""> 


.jpg" alt= ""> 
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is 
<div class= "clearfix"> 
</div> 
</ul> 
<ul class = "tag_navlist 一 unstyled"> 
<h4> 
标签 
</h4> 
<1iclass= "active"> 
<ahref="#"> 
网 页 设计 
</a> 
</1i> 
<! 一 更 多 标签 -一 > 
<div class= "clearfix"> 
</div> 
</ul> 
< div class = "news_letter"> 
<h4 > 
邮件 订阅 
</h4> 
< form> 
< span > 
< input type = "text" placeholder = "请 输入 Email 地 址 "> 
</span> 
< span class = "pull— right fa— btn btn 一 1 btn- le"> 
< input type = "submit" value = "订阅 "> 
</span> 
</form> 
</div> 
</div> 
<div class = "clearfix"> 


</div> 


相关 的 CSS 代码 如 下 所 示 : 


.blog_right h4{ 
text — transform:capitalize; 
font — size:2em; 
color: # 3b3b3b; 
font - family: ' 微 软 雅 黑 '; 
margin - bottom:15px; 


3.8 “联系 我 们 ”页 面 


“联系 我 们 ”页 面 和 “关于 我 们 ”页 面 比较 类 似 , 不 需要 有 十 分 吸引 眼球 的 图 片 ,但 是 需 
要 简单 、 易 读 的 文字 信息 ,最 好 加 上 一 个 留言 板 之 类 的 表单 。 
页 面 布局 如 图 3-35 所 示 。 


标题 ] 文本 框 ”| [搜索 
导航 
联系 方式 在 线 提问 
姓名 
文字 邮箱 
问题 
提交 
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图 3-35 “联系 我 们 ”页 面 布局 图 


联系 方式 效果 图 如 图 3-36 所 示 。 


联系 方式 


网 站 版 权 


通信 地 址 : 常州 科教 城 ( 常州 市 武进 区 涯 湖 中 路 3 号 ) 


部 政 编码 : 213164 


学 院 网 址 : httpV/www.czie.net 


招生 网 址 : http://www.czie.net/zs 
咨 词 电话 : 400-8817-519 ( 免 长 途 话费 ) 
招生 QQ : 4008817519 


3-36 ”联系 方式 区 域 效果 图 


相关 HTML 代码 如 下 所 示 : 


<div class= "col-md-4 company ad"> 


<h2 > 
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联系 方式 
</h2> 
<address> 
详细 地 址 
</address> 
</div> 


相关 CSS 代码 如 下 所 示 : 


. Company _ad h2{ 
margin:0 0 20px; 
text — transform:capitalize; 
font — size:3em; 
color: # 3b3b3b; 
font - family: ' 微 软 雅 黑 '; 


.Company_ad p{ 
font - size:14px; 
color: # 3b3b3b; 


.Company ad p af 
Color: #ff5454; 
transition:all 0.3 sease— in— out; 


.Company_ad p a:hover{ 
text — decoration:none; 
color: # 3b3b3b; 

} 


响应 式 布局 代码 如 下 所 示 : 


@media only screen and (max— width:640px){ 


.Company_ad{ 
margin - left:0; 


} 
@media only screen and (max— width:480px){ 
.company_ad h2{ 
font — size:2em; 


382 在 线 提问 设计 
在 线 提问 效果 图 如 图 3-37 所 示 。 


LDO 项 目 3 江 阶 项 目 : 教育 门户 网 站 前 台 设计 < 


在 线 提问 


姓 各 


图 3-37 ”在线 提问 区 域 效 果 图 
相关 HTML 代码 如 下 所 示 : 


<div class = "col 一 md 一 8"> 
< div class = "contact ~ form"> 
<h2 > 
在 线 提问 
</h2 > 
< form method = "post" action= "contact — post. html"> 
<div> 
< Span > 
姓名 
</span> 
< span > 
< input type = "text" class= "form— control" id= "userName"> 
</span> 
</div> 
<div> 
<span> 
电子 信箱 
</span> 
<span> 
< input type = "email" class = "form— control" id= "inputEmail3"> 
</span> 
</div> 
<div> 
<span> 
内 容 
</span> 
<span> 
< textarea name = "userMsg"> 
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</textarea> 
</span> 
</div> 
<div> 
<label class = "fa— btn btn—1 btn— 1e"> 
< input type = "submit" value = "提交 "> 
</label> 
</div> 
</form> 
</div> 
</div> 


相关 CSS 代码 如 下 所 示 : 


.Contact ~ form h2{ 
margin:0 0 20px; 
text - transform:capitalize; 
font - size: 3em; 
color: # 3b3b3b; 
font - family: ' 微 软 雅 黑 '; 


.Contact - form span{ 
display:block; 
text - transform:capitalize; 
font — size:14px; 
color: # 5b5b5b; 
font - weight :normal; 
margin — bottom:10px; 


.Contact - form textarea{ 
font - family: ' 微 软 雅 黑 '; 
padding:10px; 
display:block; 
width:99. 3333%; 
background: # ffffff; 
outline:none; 
color: #c0c0c0; 
font - size:0.8725em; 
border:1px solid # ECECEC; 
— webkit ~ appearance: none; 
resize:none; 
height:120px; 
border - radius: 4px; 
— webkit — border - radius:4px; 
一 moz — border — radius:4px; 
— 0— border ~ radius:4px; 
transition:all 0.3 sease— in— out; 
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.Contact - form textarea:focus{ 
border:1px solid #ff5454; 


.form— control{ 
box — shadow:none; 
border :1px solid # ECECEC; 
transition:all 0.3 sease— in— out; 


.form— control:focus{ 
box — shadow: none; 


.Contact - form input [type= "submit"]{ 
font - family: ' 微 软 雅 黑 '; 
— webkit — appearance: none; 
Cursor :pointer; 
border : none; 
outline:none; 
background :none; 
text - transform: uppercase; 
font - weight:100; 


.Contact - form label{ 
position:relative; 
z— index:1; 


.form— control:focus{ 
border - color: # ff5454; 
} 


响应 式 布局 代码 如 下 所 示 : 


@media only screen and (max— width:480px){ 
.Contact 一 form h2{ 
font — size:2. 5em; 


3.9 项 目 进 阶 


本 项 目 是 一 个 较 综合 的 门户 网 站 ,设计 了 1 个 首页 .4 个 二 级 页 面 。 在 设计 过 程 中 ， 
考虑 的 多 屏幕 浏览 的 情况 ,是 一 个 响应 式 网 站 。 网 站 的 核心 样式 在 style. css 文件 中 实 
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现 。 请 参考 style. css 文件 中 的 各 个 样式 ,制作 一 个 blue-style. css 文件 ,实现 在 不 修改 网 
页 HTML 元 素 的 前 提 下 ,通过 切换 CSS 文件 ,实现 网 站 风格 的 转换 。 


3.10 课外 实践 


请 自行 设计 一 个 企业 门户 ,包括 首页 ,企业 简介 、 产 品 列表 、 留 言 板 、 招 贤 纳 士 等 页 面 。 


知识 目标 : 


。 掌握 JavaScript 操作 HTML 元 素 的 方法 
。 掌握 JavaScript 操作 JSON 格式 数据 的 方法 


能 力 目 标 : 


。 能 使 用 jQuery 操作 HTML 元 素 
。 能 使 用 jQuery 操作 JSON 格式 的 数据 


4.1 项 目 介绍 


本 项 目 是 一 个 手机 网 页 应 用 ,设计 一 个 用 于 阅读 新 闻 的 网 站 。 客 户 端 定位 于 手机 等 
移动 设备 ,需要 具有 界面 简洁 ,操作 方便 等 特点 ,效果 图 如 图 4-1 所 示 。 


新 闻 20150501000001 
新 闻 20150501000002 
新 闻 20150501000003 
新 闻 20150501000004 


新 闻 20150501000011 
新 闻 20150501000012 
新 闻 20150501000013 
新 闻 20150501000014 
新 闻 20150501000015 


要 闻 01000001 

要 闻 01000002 

要 闻 01000003 发 布 时 间 : 2015 年 05 月 04 日 
要 闻 01000004 新 闻 内 容 

要 闻 01000005 

要 闻 01000006 


要 闻 01000007 
要 闻 01000008 
要 闻 01000009 
要 闻 01000010 
要 闻 01000011 
要 闻 01000012 
要 闻 01000013 


图 4-1 项 目 效果 图 


本 项 目 需 要 一 个 数据 库 作 为 新 闻 来 源 。 在 设计 中 ,使 用 了 新 浪 网 站 的 一 些 新 闻 作 为 


素材 。 
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4.2 知识 准备 


421 JSON 数 据 格式 


JSON(JavaScript Object Notation) 是 一 种 轻 量 级 的 数据 交换 格式 ,类 似 于 XML。 它 
虽然 是 JavaScript 的 一 个 子 集 ,但 是 采用 完全 独立 于 语言 的 文本 格式 。 这 些 特性 使 JSON 
成 为 理想 的 数据 交换 格式 ,阅读 和 编写 都 很 方便 。 


1. JSON 实例 


{ 
"student": [ 
{ 
"code": "001", 
"name": " 张 三 " 
}, 
{ 
"code": "002", 
"name" : " 李 四 " 
}, 
{ 
code" : "003", 
"name" : " 王 五 " 
} 
] 
} 


student 对 象 是 包含 3 个 学 生 记 录 (对象) 的 数组 。 上 面 这 段 代码 来 源 于 如 下 


JavaScript 语句 : 


var student = [{ 


"code" : "001", 
"name" : " 张 三 " 
}, 
{ 
code" : "002", 
"name" : " 李 四 
}, 
{ 
"code" : "003", 
name" : " 王 五 
}]; 


alert( student. length); 


通过 上 述 例子 ,对 JSON 归纳 如 下 : 
(1) JSON 指 的 是 JavaScript 对 象 表示 法 (JavaScript Object Notation)。 


(2) JSON 是 轻 量 级 的 文本 数据 交换 格式 。 

(3) JSON 独立 于 语言 。JSON 使 用 JavaScript 语法 描述 数据 对 象 ,但 是 JSON 独立 
于 语言 和 平台 。JSON 解析 器 和 JSON 库 支 持 不 同 的 编程 语言 。 目 前 很 多 动态 编程 语言 
(PHP、JSP、. NET) 支 持 JSON。 

(4) JSON 具有 自我 描述 性 ,更 易 理 解 。 

(5) JSON 文本 格式 在 语法 上 与 创建 JavaScript 对 象 的 代码 相同 。 由 于 这 种 相似 性 ， 
无 须 解 析 器 ,JavaScript 程序 能 够 使 用 内 建 的 eval() 函 数 , 用 JSON 数据 生成 原生 的 
JavaScript 对 象 。 


2. JSON 语法 


JSON 语法 是 JavaScript 对 象 表示 法 语法 的 子 集 。 

1) 名 称 / 值 对 

JSON 数据 的 书写 格式 是 : 名 称 / 值 对 ,包括 字段 名 称 (在 双 引 号 中 ), 后 面 写 一 个 冒 
号 ,然后 是 值 ,如 下 所 示 。 


"name" :" 张 三 " 
这 很 容易 理解 ,等 价 于 下 述 JavaScript 语句 : 
name = " 张 三 " 


2) JSON 值 
。 数字 (整数 或 浮 点 数 ) 
。 字符 串 ( 在 双 引 号 中 ) 
。 导 辑 值 (true 或 false) 
。 数组 (在 方 括号 中 ) 
。 对 象 (在 花 括号 中 ) 
。 null 
3) JSON 对 象 
JSON 对 象 在 花 括号 中 书写 ,可 以 包含 多 个 名 称 / 值 对 : 
{ 
"code": "001", 
"name" : " 张 三 " 


} 
这 一 点 也 容易 理解 ,与 下 述 JavaScript 语句 等 价 : 


code= "001" 
name = " 张 三 " 


4) JSON 数组 
JSON 数组 在 方 括号 中 书写 ,可 包含 多 个 对 象 : 


{ 
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"student": [ 


{ 
”code" : "001", 


"name" : " 张 三 " 


"code": "002”7 
"name" : " 李 四 " 


"code" : "003", 
"name": " 王 五 " 


在 上 例 中 ,对 象 “student" 是 包含 3 个 对 象 的 数组 。 每 个 对 象 代表 一 条 关于 某 个 学 生 
(学 号 ,姓名 ) 的 记录 。 

5) JSON 使 用 JavaScript 语法 

因为 JSON 使 用 JavaScript 语法 ,所 以 无 须 额 外 的 软件 就 能 处 理 JavaScript 中 的 
JSON 。 

通过 JavaScript, 可 以 创建 一 个 对 象 数组 ,并 像 下 述 形式 一 样 赋值 


var student = [{ 
"code" : "001", 
"name" : " 张 三 
}, 
{ 
code" : "002", 
"name" : " 李 四 
}, 
{ 
code" : "003", 
name" : " 王 五 " 


}]; 

可 以 像 下 述 形式 一 样 访问 JavaScript 对 象 数组 中 的 第 一 项 : 
student[0]. code; 

返回 的 内 容 是 *001”。 

可 以 如 下 修改 数据 : 

student[0].code= "009"; 


6) JSON 文件 
JSON 文件 的 类 型 是 .json。JSON 文本 的 MIME 类 型 是 application/json。 


[ 页 目 4 提高 顶 目 , 移动 新 闻 网 站 前 台 设计 | 妇 人 > | 


7) 把 JSON 文本 转换 为 JavaScript 对 象 

JSON 最 常见 的 用 法 之 一 ,是 从 Web 服务 器 读 取 JSON 数据 (作为 文件 或 
HttpRequest) ,将 JSON 数据 转换 为 JavaScript 对 象 , 然 后 在 网 页 中 使 用 该 数据 。 

var txt = '{"student":["' 

+ '{"code":"001", "name" :" 张 三 "},' 

+ '{"code" :"002", "name":" 李 四 "},' 

+ '{"code":"003", "name":" 王 五 "}]}'; 

由 于 JSON 语法 是 JavaScript 语法 的 子 集 ,JavaScript 函数 eval() 可 用 于 将 JSON 文 
本 转换 为 JavaScript 对 象 。 


var obj = eval("("+txt+")"); 


eval() 函数 可 编译 并 执行 任何 JavaScript 代码 。 这 隐藏 了 一 个 潜在 的 安全 问题 。 

使 用 JSON 解析 器 将 JSON 转换 为 JavaScript 对 象 是 更 安全 的 做 法 。 但 JSON 解析 
器 只 能 识别 JSON 文本 ,而 不 会 编译 脚本 。 

在 浏览 器 中 ,提供 了 原生 JSON 支持 ,而 且 JSON 解析 器 的 速度 更 快 。 


var obj = JSON. parse( txt); // 比 eval 方法 更 安全 高 效 

对 于 较 老 的 浏览 器 ,可 使 用 JavaScript 库 : https://github. com/douglascrockford/ 
JSON-js。 

有 关 JSON 的 更 多 使 用 方法 ,请 参阅 其 官方 网 站 的 文档 和 例子 ,自行 学 习 , 本 书 不 再 
展开 描述 。 

JSON 相关 网 站 如 下 所 示 。 


百度 百科 : http://baike. baidu. com/view/136475. htm. 
JSON 中 文教 程 : www. w3school. com. cn/JSON. 


422 jQuery 基础 


jQuery 是 一 个 快速 .简单 的 JavaScript 库 , 它 简化 了 HTML 元 素 操作 、 事 件 处 理 \ 动 
画 、AJAX 互动 , 极 大 地 提高 了 编写 JavaScript 代码 的 效率 ,使 代码 更 加 优雅 、 健 壮 。 


1. 下 载 jQuery 


jQuery 是 一 个 JS 文件 ,可 以 在 其 官网 http://jquery. com 中 下 载 ,如 图 4-2 所 示 。 

目前 ,jQuery 有 两 个 版 本 ,分 别 是 1.x 版 和 2.x 版 。 两 者 的 主要 区 别 为 : 2.x 版 为 了 
有 更 高 的 效率 和 更 小 的 文件 体积 ,不 支持 IE6 IE7 以 及 IE8。 

为 了 方便 调试 ,每 个 版 本 的 jQuery 都 有 两 种 文件 ,一 个 是 未 压缩 的 版 本 ,适用 于 平时 
开发 时 调试 用 ,命名 为 jquery-xxx. js(xxx 表示 具体 的 版 本 号 ); 另 一 个 是 压缩 版 本 
(jQuery 使 用 UglifyJS 作为 压缩 工具 ,该 工具 对 JS 的 压缩 非常 高 ,有 兴趣 的 读者 可 以 自 
行 学 习 ) ,适用 于 正式 发 布 时 用 ,命名 为 jquery-xxx. min. js。 

图 4-3 所 示 为 最 新 的 jQuery 文件 。 可 以 看 出 ,1.x 版 比 2.x 版 的 文件 大 一 些 , 压 缩 版 
(min 版 ) 比 未 压缩 版 的 文件 小 很 多 。 


sJQueryY 


write Jess, do more. 


Downioad AplDocumentation Blog Plugins BrowserSupport 


Download jQuery 


VELTLorv2.14 


What is jQuery? Resources 
iauan co AP| Documentation 
ip epi 
| Sans 
图 4-2 jQuery 官网 首页 
名 称 类 型 大 小 
22 10:06 。 JS 文件 278 KB 
10:06 。 JS 文件 94 KB 
10:07 Linker Address . 139 KB 
1007 ”JS 文件 242 KB] 
1007 ”JS 文 件 83 KB 
BB jquery-214minmap 2015/6/2210:07 。 Linker Address 125 KB 


图 4-3 下 载 的 不 同类 型 的 jQuery 文件 


2. 使 用 jQuery 


在 使 用 jQuery 前 ,需要 先 引 用 。 在 平时 开发 过 程 中 ,建议 使 用 未 压缩 版 本 ,方便 调 
试 。 下 面 以 一 个 实例 展示 其 使 用 过 程 。 


< html xmlns = "http://www. w3.org/1999/xhtml"> 


<head> 
< script src="/jquery/jquery— 1.11.3.min. js" type = "text/javascript"> 
</script> 
< script type = "text/javascript"> 
$ (document). ready(function() { 
$ ("a").click(function() { 
$ ('#time'). html (newDate( )); 
D); 
D; 
</script > 
<title> 
</title> 
</head > 


<body> 
<div id= "time"> 
</div> 
<a href ="#"> 
显示 时 间 
</a> 
</body> 


</html > 


运行 后 ,效果 如 图 4-4 所 示 。 


on Jun 22 2015 10:31:00 GNT+0800 (中 国标 准时 间 ) 
显示 时 间 


图 4-4 实例 显示 效果 
在 这 个 例子 中 ,首先 在 head 部 分 引用 了 jQuery 文件 : 
< script src = "/jquery/jquery— 1.11.3.min. js"></script> 
代码 中 ,所 有 使 用 到 jQuery 的 JS 代码 都 写 在 $ (document). ready() 函数 ( 文 档 就 绪 函 
数 ) 中 ,目的 是 防止 文档 在 完全 加 载 (就 绪 ) 之 前 运行 jQuery 代码 。 这 段 代 码 比 较 容易 理解 : 
在 a 元 素 ( 超 链接 ) 的 单 击 (click) 事 件 中 ,将 当前 系统 时 间 显示 在 id 为 time 的 div 元 素 中 。 
$ ("a").click(function() { 


$ ('#time'). html (newDate( ) ); 
}); 


3. jQuery 语法 


jQuery 语法 的 思路 是 : 先 按 照 一 定 规则 “选中 ” 某 个 (或 多 个 )HTML 元 素 ,然后 对 元 
素 执 行 某 些 操作 。 
基础 语法 是 : 


$ (selector) .action() 


$ (美元 符号 ) 是 jQuery 最 重要 的 一 个 函数 (函数 名 就 是 jQuery, $ 是 函数 的 简写 ) 。 
选择 符 (selector) 是 “查询 ”和 “查找 ”HTML 元 素 的 规则 (一 般 是 字符 串 ); action() 是 指 
元 素 执行 的 操作 。 在 前 面 的 例子 中 , $ ('#time'"). html() 中 html() 函 数 的 作用 就 是 修改 
某 个 元 素 内 部 的 HTML 内 容 。 


示例 如 下 : 

$ (this). hide() // 隐 藏 当前 元 素 

$ ("p").hide() // 隐 藏 所 有 p( 段 落 ) 

$ (".test").hide() // 隐 藏 所 有 class = "test" 的 所 有 元 素 
$ ("#test"). hide() // 隐 藏 id = "test" 的 元 素 


4. jQuery 选择 器 
jQuery 提供 了 方便 、 高 效 的 选择 HTML 元 素 的 方法 ,可 以 说 ,jQuery 选择 器 是 整个 
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jQuery 的 精 人 血 ,如 表 4-1 一 表 4-9 所 示 。 
表 4-1 基本 选择 器 


$ (#id) 根据 给 定 的 id 匹配 一 个 元 素 

$ (class) 根据 给 定 的 类 名 匹配 元 素 

$ (element) 根据 给 定 的 元 素 名 匹配 元 素 

$Cx*) 匹配 所 有 元 素 

$ (selectorl ,selector2,. . . ,selectorN) 将 每 一 个 选择 器 匹配 到 的 元 素 合 并 后 一 起 返回 
表 4-2 层次 选择 器 


$ ("ancestor descendant") 选取 ancestor 元 素 里 的 所 有 descendant( 后 代 ) 元 素 


只 选取 parent 元 素 下 的 child ( 子 层 级 ) 元 素 , 与 $ ("ancestor 
descendant") 有 区 别 。 前 者 选择 所 有 后 代 元 素 ( 含 且 不 限于 子 层级 ) 


$ ("parent > child") 


$ ('prev + next') 选取 紧 接 在 prev 元 素 后 的 next 元 素 
$ ('prev ~ siblings') 选取 prev 元 素 之 后 的 next 元 素 
表 4-3 ”过滤 选 择 器 

$ ("selector:first") 选取 第 一 个 元 素 
$ ("selector:last") 选取 最 后 一 个 元 素 
$ ("selector: not(selector2)") 去 除 所 有 与 给 定 选择 器 匹配 的 元 素 
$ ("selector: even") 选取 索引 是 偶数 的 所 有 元 素 ,索引 从 0 开始 
$ ("selector:o0dd") 选取 索引 是 奇数 的 所 有 元 素 ,索引 从 0 开始 
$ ("selector:eq(index)") 选取 索引 等 于 index 的 元 素 ,index 从 0 开始 
$ ("selector: gt(index)") 选取 索引 大 于 index 的 元 素 ,index 从 0 开始 
$ ("selector:lt(index)") 选取 索引 小 于 index 的 元 素 ,index 从 0 开始 
$ (":header") 选取 所 有 的 标题 元 素 , 如 hl、h2、h3 等 
$ (":animated") 选取 当前 正在 执行 动画 的 所 有 元 素 


表 4-4 基本 过 滤 选 择 器 


$ (":contains(text)") 选取 含有 文本 内 容 为 text 的 元 素 

$ (":empty") 选取 不 包含 子 元 素 或 者 文本 的 空 元 素 
$ (":has(selector2)") 选取 含有 选择 器 所 匹配 的 元 素 

$ (":parent") 选取 含有 子 元 素 或 者 文本 的 元 素 


表 4-5 ”可见 性 过 滤 选 择 器 
$ (":hidden") 选取 所 有 不 可 见 的 元 素 
$ (":visible") 选取 所 有 可 见 的 元 素 
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表 4-6 属性 过 滤 选 择 器 


$("selector[attribute]") 选取 拥有 此 属性 的 元 素 
$ ("selector[attribute= value]") 选取 属性 的 值 为 value 的 元 素 
$ ("selector[Lattribute! =value]") 选取 属性 的 值 不 等 于 value 的 元 素 


$ ("selector[Lattribute* = value]") 


选取 属性 的 值 以 value 开始 的 元 素 


$ ("selector[attribute $ =value]") 


选取 属性 的 值 以 value 结束 的 元 素 


$ ("selector[attribute * 一 value]") 


选取 属性 的 值 含有 value 的 元 素 


$ ("selector[selector2][selectorN]") 


用 属性 选择 器 合并 成 一 个 复合 属性 选择 器 ,满足 多 个 条 件 。 
每 选择 一 次 ,缩小 一 次 范围 ,如 $ ("div[idj[title $ = 'test']") 
选取 拥有 属性 id, 并 且 属 性 title 以 test 结束 的 一 div 之 元 素 


表 4-7 子 元 素 过 滤 选 择 器 


$ (":nthchild(index/even/odd/equation)") 


选取 每 个 父 元 素 下 的 第 index 个 子 元 素 或 者 奇偶 元 素 ， 
index 从 1 算 起 


$ ("selector:first child") 


选取 每 个 父 元 素 的 第 一 个 子 元 素 


$ ("selector:last child") 


选取 每 个 父 元 素 的 最 后 一 个 子 元 素 


$ ("selector:only child") 


如 果 某 个 元 素 是 它 父 元 素 中 唯一 的 子 元 素 ,将 会 被 匹 


配 ; 如 果 父 元 素 中 含有 其 他 元 素 , 则 不 会 被 匹配 


表 4-8 ”表单 对 象 属性 过 滤 选 择 器 


$ ("selector:enabled") 


选取 所 有 可 用 元 素 


$ ("selector: disabled") 


选取 所 有 不 可 用 元 素 


$ ("selector:checked") 


选取 所 有 被 选中 的 元 素 (radio checkbox) 


$ ("selector: selected") 选取 所 有 被 选中 的 选项 元 素 (select) 
表 4-9 表单 选择 器 

$(":input") 选取 所 有 的 一 input>、 王 textarea 二 一 select> 、 一 button 二 元 素 

$(":text") 选取 所 有 的 单行 文本 框 

$(":password") 选取 所 有 的 密码 框 

$(":radio") 选取 所 有 的 单 选 按钮 

$ (":checkbox") 选取 所 有 的 复 选 框 

$(":submit") 选取 所 有 的 提交 按钮 

$(":image") 选取 所 有 的 图 像 按钮 

$(":reset") 选取 所 有 的 重 置 按钮 

$(":button") 选取 所 有 的 按钮 

$ ("file") 选取 所 有 的 上 传 域 

$(":hidden") 选取 所 有 不 可 见 元 素 


5. jQuery 事件 


首先 ,经 常 使 用 的 添加 事件 的 方式 如 下 所 示 : 
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< input type = "button"” id = "btn" value = "点 击 " onclick = "showMsg();" /> 
< script type = "text/javascript"> 
function showMsg() { 
alert(" 消 息 显示 "); 
} 


</script > 
最 常用 的 是 以 为 元 素 添加 onclick 元 素 属性 的 方式 来 添加 事件 。 另 一 种 是 通过 修改 
dom 属性 的 方式 来 添加 事件 : 


< input type = "button" id = "btn2" value = "点 击 "” /> 
< Script type = "text/javascript"> 
function showMsg() { 
alert(" 消 息 显示 "); 
} 


$ (function () { 
document. getElementById("btn2"). onclick = showMsg; 
D); 


</script > 


添加 元 素 属性 和 修改 dom 属性 这 两 种 方法 的 效果 相同 ,但 不 等 效 。 


$ (function () { 
// 等 效 于 < input type = "button" id = "btn2" value = "click mel" onclick = "alert(' 消 息 显示 ')" /> 
document. getElementById("btn2").onclick = showMsg; 

}); 


// 相 当 于 : 

// document.getElementById("btn").onclick= function(){ 

// alert("msg is showing!"); 

1 

< input type = "button" id = "btn" value = "click me!" onclick = "showMsg();" /> 

这 两 种 方式 的 弊端 是 : 

(1) 只 能 为 一 个 事件 添加 一 个 事件 处 理 函数 ,使 用 赋值 符 会 将 前 面 的 函数 冲 掉 。 

(2) 在 事件 处 理 函 数 中 ,获取 事件 对 象 的 方式 不 同 。 

(3) 添加 多 播 委 托 的 函数 在 不 同 浏览 器 中 不 同 。 

多 播 委 托 是 指 在 下 中 ,通过 dom. attachEvent, 在 Firefox 中 采用 dom. 
addEventListener 方式 来 添加 事件 。 

所 以 ,应 该 握 弃 通过 修改 元 素 属性 和 通过 修改 dom 属性 的 方式 添加 事件 ,而 应 该 使 
用 多 播 事 件 的 委托 方式 添加 事件 处 理 函数 。 

使 用 jQuery 事件 处 理 函数 的 好 处 是 : 

(1) 添加 的 是 多 播 事 件 委托 。 可 以 为 dom 的 click 事件 添加 一 个 函数 后 ,再 次 添加 一 
个 函数 。 

(2) 统一 了 事件 名 称 。 添 加 多 播 委 托 时 ,IE 在 事件 名 称 前 加 了 “on”, 而 Firefox 直接 
使 用 事件 名 称 。 


(3) 可 以 将 对 象 行为 全 部 用 脚本 控制 。 使 用 脚本 控制 元 素 行为 ,使 用 HTML 标签 控 
制 元 素 内 容 , 用 CSS 控制 元 素 样式 ,达到 了 元 素 的 行为 .内容 、 样 式 分 离 的 状态 。 
表 4-10 列 出 了 基础 的 jQuery 事件 处 理 函 数 。 


表 4-10 基础 的 jQuery 事件 处 理 函 数 
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函 数 名 


说 明 


例 子 


bind(type, [data], fn) 


为 匹配 元 素 的 指定 事 
件 添加 事件 处 理 函 数 


function secondClick() { 


alert("second click!"); 


$ ("#dv1"). bind("click", secondClick); 


one(type, [data] ,fn) 


为 匹配 元 素 的 指定 事 
件 添加 一 次 性 事件 处 
理 函 数 ; 

通过 fn() 函数 参数 
data 属性 可 获取 值 


// 数 据 通过 fn() 的 参数 传递 过 去 
// 例 如 ,fn 的 参数 是 e, 则 在 fn() 内 部 可 以 通过 e. data 
获取 设 定 的 参数 
$("#dv1").one("click”, { name: "zzz", age: 20 }， 
function (e) { 

alert(e. data. name) ; 


Ba 


trigger(event, [data]) 


在 匹配 的 元 素 上 触发 
某 类 事件 ; 

此 函数 导致 浏览 器 同 
名 的 默认 行为 被 执行 


triggerHandler 
(event, [data]) 


触发 指定 的 事件 类 型 
上 所 绑 定 的 处 理 函 数 ; 
不 会 执行 浏览 器 默认 
行为 


unbind(type,fn) 


为 匹配 的 元 素 解 除 指 
定 事件 的 处 理 函 数 


// 如 果 没 有 参数 , 则 解除 匹配 元 素 的 所 有 事件 处 理 函 数 
$("#dvl"). unbind(); 


// 如 果 提 够 了 事件 类 型 参数 , 则 只 删除 该 事件 类 型 的 
处 理 函 数 
$("#dv1"). unbind( "click"); 


// 如 果 把 绑 定时 传递 的 处 理 函 数 作为 第 二 个 参数 传 
递 , 则 只 删除 该 处 理 函 数 
$(" 井 dvl"). unbind("click"，secondClick); 


6. jQuery 效果 


jQuery 效果 如 表 4-11 所 示 。 


表 4-11 jQuery 效果 


方 ”法 


描 述 


animate() 


对 被 选 元 素 应 用 自 定义 的 动画 
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续 表 

方 法 描 述 
clearQueue() 对 被 选 元 素 移 除 所 有 排队 的 函数 ( 仍 未 运行 的 
delay() 对 被 选 元 素 的 所 有 排队 函数 ( 仍 未 运行 ) 设 置 延迟 
dequeue() 运行 被 选 元 素 的 下 一 个 排队 函数 
fadeIn() 逐渐 改变 被 选 元 素 的 不 透明 度 , 从 隐藏 到 可 见 
fadeOut() 逐渐 改变 被 选 元 素 的 不 透明 度 , 从 可 见 到 隐藏 
fadeTo() 把 被 选 元 素 逐 渐 改变 至 给 定 的 不 透明 度 
hideO 隐藏 被 选 的 元 素 
queue() 显示 被 选 元 素 的 排队 函数 
show() 显示 被 选 的 元 素 
slideDown() 通过 调整 高 度 来 滑动 显示 被 选 元 素 
slideToggle() 对 被 选 元 素 进 行 滑动 隐藏 和 滑动 显示 的 切换 
slideUp() 通过 调整 高 度 来 滑动 隐藏 被 选 元 素 
stop() 停止 在 被 选 元 素 上 运行 动画 
toggle() 对 被 选 元 素 进行 隐藏 和 显示 的 切换 


7. jQuery 文档 操作 


表 4-12 所 示 方 法 中 ,除了 html() 方 法 外 ,都 同时 适用 于 XML 文档 和 HTML 文档 。 


方 法 


表 4-12 jQuery 文档 操作 方法 
描 述 


addClass() 


向 匹配 的 元 素 添加 指定 的 类 名 


after() 


在 匹配 的 元 素 之 后 插入 内 容 


append() 


向 匹配 元 素 集合 中 的 每 个 元 素 结尾 插入 由 参数 指定 的 内 容 


appendTo() 


向 目标 结尾 插入 匹配 元 素 集合 中 的 每 个 元 素 


attr() 


设置 或 返回 匹配 元 素 的 属性 和 值 


before() 


在 每 个 匹配 的 元 素 之 前 插入 内 容 


clone() 


创建 匹配 元 素 集合 的 副本 


detach() 


从 dom 中 移 除 匹 配 元 素 集合 


empty() 


删除 匹配 的 元 素 集合 中 所 有 的 子 节点 


hasClass() 


检查 匹配 的 元 素 是 否 拥有 指定 的 类 


html() 


设置 或 返回 匹配 的 元 素 集合 中 的 HTML 内 容 


insertAfter() 


把 匹配 的 元 素 插入 另 一 个 指定 的 元 素 集合 的 后 面 


insertBefore() 


把 匹配 的 元 素 插入 另 一 个 指定 的 元 素 集合 的 前 面 


prepend() 


向 匹配 元 素 集合 中 的 每 个 元 素 开 头 插入 由 参数 指定 的 内 容 


prependTo() 


向 目标 开头 插入 匹配 元 素 集合 中 的 每 个 元 素 


remove() 


移 除 所 有 匹配 的 元 素 


removeAttr() 


从 所 有 匹配 的 元 素 中 移 除 指定 的 属性 


removeClass() 


从 所 有 匹配 的 元 素 中 删除 全 部 或 者 指定 的 类 


replaceAll() 


用 匹配 的 元 素 蔡 换 所 有 匹配 到 的 元 素 


replaceWith() 


用 新 内 容 替 换 匹配 的 元 素 
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续 表 
者 法 描 述 
text() 设置 或 返回 匹配 元 素 的 内 容 
toggleClass() 从 匹配 的 元 素 中 添加 或 删除 一 个 类 
unwrap() 移 除 并 替换 指定 元 素 的 父 元 素 
val() 设置 或 返回 匹配 元 素 的 值 


wrap() 


把 匹配 的 元 素 用 指定 的 内 容 或 元 素 包 庄 起 来 


wrapAll() 


把 所 有 匹配 的 元 素 用 指定 的 内 容 或 元 素 包 庄 起 来 


wrapinner() 


将 每 一 个 匹配 的 元 素 的 子 内 容 用 指定 的 内 容 或 元 素 包 庄 起 来 


8. jQuery 属性 操作 


表 4-13 所 示 方 法 中 ,除了 html() 方 法 外 ,都 同时 适用 于 XML 文档 和 HTML 文档 。 


表 4-13 jQuery 属性 操作 方法 


方 ” 法 描 述 
addClass() 向 匹配 的 元 素 添加 指定 的 类 名 
attr() 设置 或 返回 匹配 元 素 的 属性 和 值 
hasClass() 检查 匹配 的 元 素 是 否 拥有 指定 的 类 
html() 设置 或 返回 匹配 的 元 素 集合 中 的 HTML 内 容 


removeAttr() 


从 所 有 匹配 的 元 素 中 移 除 指定 的 属性 


removeClass() 


从 所 有 匹配 的 元 素 中 删除 全 部 或 者 指定 的 类 


toggleClass() 


从 匹配 的 元 素 中 添加 或 删除 一 个 类 


val() 


9. jQuery CSS 操作 


设置 或 返回 匹配 元 素 的 值 


表 4-14 列 出 的 这 些 方法 设置 或 返回 元 素 的 CSS 相关 属性 。 


表 4-14 jQuery CSS 属性 


CSS 属性 


描 述 


css() 


设置 或 返回 匹配 元 素 的 样式 属性 


height() 


设置 或 返回 匹配 元 素 的 高 度 


offset() 


返回 第 一 个 匹配 元 素 相对 于 文档 的 位 置 


offsetParent() 


返回 最 近 的 定位 祖先 元 素 


position() 


返回 第 一 个 匹配 元 素 相对 于 父 元 素 的 位 置 


scrollLeft() 


设置 或 返回 匹配 元 素 相 对 滚动 条 左 侧 的 偏 移 


scrollTop() 


设置 或 返回 匹配 元 素 相对 滚动 条 顶部 的 偏 移 


width() 


设置 或 返回 匹配 元 素 的 宽度 


10. jQuery 遍历 


jQuery 遍历 函数 包括 用 于 筛选 查找 和 串联 元 素 的 方法 ,如 表 4-15 所 示 。 
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表 4-15 jQuery 遍历 函数 


函 数 描 述 
.addO) 将 元 素 添 加 到 匹配 元 素 的 集合 中 
.andSelf() 把 堆栈 中 之 前 的 元 素 集 添加 到 当前 集合 中 
. children() 获得 匹配 元 素 集合 中 每 个 元 素 的 所 有 子 元 素 
. Closest() 从 元 素 本 身 开始 , 逐 级 向 上 级 元 素 匹 配 ,并 返回 最 先 匹 配 的 祖先 元 素 
. contents() 获得 匹配 元 素 集合 中 每 个 元 素 的 子 元 素 ,包括 文本 和 注释 节点 
. each() 对 jQuery 对 象 进行 迭代 ,为 每 个 匹配 元 素 执行 函数 
.end() 结束 当前 链 中 最 近 的 一 次 筛选 操作 ,并 将 匹配 元 素 集合 返回 到 前 一 次 的 状态 
.eq() 将 匹配 元 素 集合 缩减 为 位 于 指定 索引 的 新 元 素 
. filter() 将 匹配 元 素 集合 缩减 为 匹配 选择 器 或 匹配 函数 返回 值 的 新 元 素 
. find() 获得 当前 匹配 元 素 集合 中 每 个 元 素 的 后 代 , 由 选择 器 筛选 
. first() 将 匹配 元 素 集合 缩减 为 集合 中 的 第 一 个 元 素 
. has() 将 匹配 元 素 集合 缩减 为 包含 特定 元 素 的 后 代 的 集合 
.is() 根据 选择 器 检查 当前 匹配 元 素 集合 。 如 果 存 在 至 少 一 个 匹配 元 素 ,返回 true 
.last() 将 匹配 元 素 集合 缩减 为 集合 中 的 最 后 一 个 元 素 
.map() 把 当前 匹配 集合 中 的 每 个 元 素 传递 给 函数 ,产生 包含 返回 值 的 新 jQuery 对 象 
. next() 获得 匹配 元 素 集合 中 每 个 元 素 紧邻 的 同辈 元 素 
.nextAllO) 获得 匹配 元 素 集合 中 每 个 元 素 之 后 的 所 有 同辈 元 素 , 由 选择 器 筛选 (可 选 ) 
. nextUntil() 获得 每 个 元 素 之 后 所 有 的 同辈 元 素 , 直 到 过 到 匹配 选择 器 的 元 素 为 止 
. not() 从 匹配 元 素 集合 中 删除 元 素 
. offsetParent() | 获得 用 于 定位 的 第 一 个 父 元 素 
. parent() 获得 当前 匹配 元 素 集合 中 每 个 元 素 的 父 元 素 ,由 选择 器 筛选 (可 选 ) 
. parents() 获得 当前 匹配 元 素 集合 中 每 个 元 素 的 祖先 元 素 ,由 选择 器 筛选 (可 选 ) 
.parentsUntil() | 获得 当前 匹配 元 素 集合 中 每 个 元 素 的 祖先 元 素 , 直 到 过 到 匹配 选择 器 的 元 素 为 止 
.prev() 获得 匹配 元 素 集合 中 每 个 元 素 紧 邻 的 前 一 个 同辈 元 素 , 由 选择 器 筛选 (可 选 ) 
. prevAll() 获得 匹配 元 素 集合 中 每 个 元 素 之 前 的 所 有 同辈 元 素 , 由 选择 器 筛选 (可 选 ) 
. prevUntil() 获得 每 个 元 素 之 前 所 有 的 同辈 元 素 , 直 到 遇 到 匹配 选择 器 的 元 素 为 止 
. siblings() 获得 匹配 元 素 集合 中 所 有 元 素 的 同辈 元 素 , 由 选择 器 筛选 (可 选 ) 
. slice() 将 匹配 元 素 集合 缩减 为 指定 范 子 集 


对 于 jQuery 的 高 级 运用 ,特别 是 众多 jQuery 插件 的 使 用 ,请 参阅 其 官方 网 站 的 文档 
和 例子 ,自行 学 习 。 本 书 不 再 展开 描述 。 

jQuery 相关 网 站 如 下 所 示 。 

jQuery 官方 网 站 : http://jquery. com. 

jQuery 中 文教 程 : http://www. w3school. com. cn/jquery. 


423 AIAX 


AJAX(Asynchronous JavaScript and XML) 的 中 文 为 “异步 的 JavaScript 和 XML”。 
它 不 是 编程 语言 ,而 是 一 种 远程 数据 访问 的 方法 。 使 用 AJAX 技术 ,能 在 不 重新 加 载 整 
个 页 面 的 情况 下 ,与 服务 器 交换 数据 ,并 更 新 部 分 网 页 。 

使 用 原生 的 JavaScript 语言 实现 AJAX 十 分 麻烦 ,而 且 因为 浏览 器 不 同 ,在 实现 过 程 


中 需要 考虑 很 多 兼容 性 问题 。 

幸运 的 是 ,jQuery 解决 了 这 些 烦 琐 的 问题 ,用户 只 需要 调用 就 可 以 了 。jQuery 的 
get() 和 post() 方 法 用 于 通过 HTTP GET 或 POST 请 求 从 服务 器 请 求 数据 。 从 文字 含义 
上 来 讲 ,GET 基本 上 用 于 从 服务 器 获得 ( 取 回 ) 数 据 。POST 常用 于 向 服务 器 发 送 数据 并 


返回 结果 数据 。 
示例 如 下 : 


/* 
get 方法 语法 : 


$ .get(URL, callback); 
URL 参数 (必须 ), 请求 的 URL 
callback 参数 (可 选 ), 是 请 求 成 功 后 所 执行 的 函数 名 


*/ 


$ .get("action. aspx", 


function(data, status) { 
alert("Data:" + data + ",Status:" + status); 


D); 
/¥ 


post 方法 语法 : 


$ .get(URL, data callback) ; 

URL 参数 (必须 ), 请求 的 URL 

data 参数 (可 选 ), 请 求 时 发 送 的 数据 

callback 参数 (可 选 ), 是 请 求 成 功 后 所 执行 的 函数 名 


*/ 


$ .post("action. aspx", { 
name: "admin", 
password: "123456" 


}, 


function(data, status) { 
alert("Data:" + data + "\nStatus:" + status); 


}); 


jQuery 库 拥有 完整 的 AJAX 兼容 套件 。 其 中 的 函数 和 方法 允许 用 户 在 不 刷新 浏览 
器 的 情况 下 ,从 服务 器 加 载 数据 ,函数 如 表 4-16 所 示 。 


表 4-16 jQuery 函数 
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函 数 


描 述 


jQuery. ajax() 


执行 异步 HTTP(AJAX) 请 求 


.ajaxComplete() 


当 AJAX 请 求 完成 时 ,注册 要 调用 的 处 理 程序 。 这 是 一 个 AJAX 事件 


.ajaxError() 


当 AJAX 请 求 完成 且 出 现 错误 时 ,注册 要 调用 的 处 理 程序 。 这 是 一 个 AJAX 
事件 


.ajaxSend() 


在 AJAX 请 求 发 送 之 前 ,显示 一 条 消息 


jQuery. ajaxSetup() 


设置 将 来 的 AJAX 请 求 的 默认 值 


.ajaxStart() 


当 首 个 AJAX 请 求 完成 开始 时 ,注册 要 调用 的 处 理 程序 。 这 是 一 个 AJAX 事件 


.ajaxStop() 


当 所 有 AJAX 请 求 完成 时 ,注册 要 调用 的 处 理 程序 。 这 是 一 个 AJAX 事件 


.ajaxSuccess() 


当 AJAX 请 求 成 功 完成 时 ,显示 一 条 消息 
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续 表 


函数 


描 述 


jQuery. get() 


使 用 HTTP GET 请 求 ,从 服务 器 加 载 数据 


jQuery. getJSON() 


使 用 HTTP GET 请 求 ,从 服务 器 加 载 JSON 编码 数据 


jQuery. getScript() 


使 用 HTTP GET 请 求 ,从 服务 器 加 载 JavaScript 文件 ,然后 执行 该 文件 


.load() 


从 服务 器 加 载 数据 ,然后 返回 的 HTML 放 入 匹配 元 素 


jQuery. param() 


创建 数组 或 对 象 的 序列 化 表示 ,适合 在 URL 查询 字符 串 或 在 AJAX 请 求 中 
使 用 


jQuery. post() 


使 用 HTTP POST 请 求 , 从 服务 器 加 载 数 据 


. serialize() 


将 表单 内 容 序列 化 为 字符 串 


. serializeArray() 


序列 化 表单 元 素 , 返 回 JSON 数据 结构 数据 


4.3 网 站 规划 与 设计 


本 项 目 分 为 服务 器 端 编程 和 客户 端 编程 两 个 方面 ,下 面 分 别 进 行 描述 。 

服务 器 端 主要 包含 多 个 JSON 格式 的 数据 文件 作为 网 站 的 数据 源 ,其 功能 包括 : 

(1) 新 闻 分 类 (category. json) 。 

(2) 首页 新 闻 列 表 (top5. json)。 

(3) 分 类 新 闻 列 表 (list01. json 一 list04. json) 。 

(4) 新 闻 详细 内 容 (article_xx. htm,xx 表示 新 闻 编 号 ) 。 

客户 端 有 3 个 网 页 ,分 别 为 首页 (index. htm)、 列 表 页 (list, htm) 和 内 容 页 (article_ 


xx. htm) 。 


(1) 在 首页 显示 新 闻 根 分 类 。 

(2) 在 首页 显示 新 闻 各 个 根 分 类 下 的 新 闻 列表 。 

(3) 显示 某 个 分 类 下 的 新 闻 列 表 。 

(4) 显示 某 条 新 闻 的 详细 信息 。 

系统 流程 如 下 所 述 : 

(1) 客户 端 打开 网 站 首页 ,将 发 送 读 取 根 分 类 列表 的 请 求 给 服务 器 。 

(2) 服务 器 将 生成 JSON 格式 的 数据 返回 给 客户 端 。 

(3) 客户 端 接 收 JSON 格式 的 数据 。 

(4) 客户 端 呈 现 新 闻 分 类 列表 。 

(5) 客户 端 在 遍历 每 个 新 闻 分 类 的 过 程 中 ,将 发 送 读 取 该 分 类 下 前 5 条 新 闻 列表 的 


请 求 给 服务 器 。 


(6) 服务 器 将 生成 JSON 格式 的 数据 返回 给 客户 端 。 
(7) 客户 端 接收 JSON 格式 的 数据 。 
(8) 客户 端 呈 现 Top 5 的 新 闻 列 表 。 


(9) 用 户 选 择 某 个 分 类 。 


(10) 客户 端 将 发 送 读 取 该 分 类 下 前 25 条 新 闻 列 表 的 请 求 给 服务 器 。 
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(11) 服务 器 将 生成 JSON 格式 的 数据 返回 给 客户 端 。 
(12) 客户 端 接收 JSON 格式 的 数据 。 
(13) 客户 端 呈 现 Top 25 的 新 闻 列表 。 


(14) 客户 选择 某 条 新 闻 。 


(15) 客户 端 发 送 读 取 该 新 闻 的 请 求 给 服务 器 。 
(16) 服务 器 将 新 闻 的 标题 ,发布 日 期 内容 显 示 到 网 页 。 


具体 流程 如 图 4-5 所 示 。 
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4.4 新 闻 首 页 


本 项 目 中 ,网 站 的 首页 由 两 个 部 分 组 成 : 上 方 为 新 闻 根 分 类 的 列表 ,用 于 快速 访问 某 
个 分 类 下 的 新 闻 列 表 页 ; 下 方 是 每 个 分 类 的 前 5 条 最 新 新 闻 。 每 个 部 分 的 上 方 是 分 类 名 
称 ,下 方 有 5 条 新 闻 的 标题 超 链接 。 

页 面 布 局 如 图 4-6 所 示 。 


分 类 1 | 分 类 2 | 分 类 3 


中 
画 
加 


图 4-6 首页 布局 


需要 注意 的 是 ,下 方 的 那个 各 个 分 类 的 前 5 条 最 新 新 闻 的 列表 是 动态 生成 的 ,所 以 首 
页 的 HTML 比较 简单 ,只 需要 2 个 div 即 可 。 
具体 代码 如 下 所 示 : 


< div id = "nav" class = "nav"> 
</div> 
<div id= "list" class = "index- list"> 


</div> 

虽然 HTML 的 代码 比较 简单 ,只 是 做 了 2 个 div 容器 ,但 容器 中 的 具体 内 容 需 要 使 
JavaScript 动态 控制 。 

具体 代码 如 下 所 示 : 
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$ (document). ready(function(){ 
$ .getJSON( 'data/category. json', function(json){ 


Var htm= "'; 
for(var i in json){ 
htm += "|'; 


htm += '<ahref ="#"' 

+ 'data— id="'+ json[i]l.id+ '"' 

+ 'data— name="'+json[i].name+ "' 
+ >'+json[i].name+ '</a>'; 

} 

$ ('#nav'). html (htm); 

$ ('#nav'). find('a'). bind( 'click', function( ){ 
viewList( 

$ (this).attr( 'data— id'), 

$ (this).attr( 'data — name') 

); 

D); 

D); 


$ .getJSON( 'data/top5. json', function(json){ 
var htm= "'; 

var lastCategory= "'; 

for (var i in json) { 

if (lastCategory != json[ i].category){ 
lastCategory = json[i].category; 

htm += '<h2>' + lastCategory + ‘</h2>'; 

} 

htm += ‘<div>'; 

htm += '<a href="#"' 

+ 'data- id="' + json[i].id + "' 

+ 'data— categoryId= "' + json[i].id. substring(0,2) + "' 
+ 'data— categoryName="' + json[i].category + '"' 
+ >'+ json[i].title + ‘</a>'; 

htm += ‘</div>'; 

} 

$ ('#1ist'). html(htm); 

$ ('#1ist'). find('a'). bind( 'click', function( ){ 
viewNews( 

$ (this).attr( 'data— id'), 

$ (this).attr( 'data — categoryId'), 

$ (this). attr( 'data - categoryName') 


在 上 述 JS 代 码 中 ,使 用 jQuery 的 getJSON 方法 ,从 服务 器 动态 获取 2 个 JSON 数 
据 。 其 中 ,category. json( 新 闻 类 别 ) 中 的 内 容 结构 如 下 所 示 : 
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[{ 


"0 

"name" :" 要 闻 " 

}, 

{ 

wide "a, 
国内 " 

}, 

{ 

JT 

"name" :" 科 技 " 

}, 

{ 

“0 

"name" : "教育 " 


}] 


top5.json( 首 页 Top 5 新 闻 列 表 ) 中 的 内 容 结 构 如 下 所 示 : 


Lt 

"id":"01000001", 

"title" :" 新 闻 20150501000001"， 
"category" :" 要 闻 " 

}, 

{ 

"id":"01000002", 

"title":" 新 闻 20150501000002"， 
"category" :" 要 闻 " 


"04000019"， 

"title" :" 新 闻 20150501000019"， 
"category" :" 教 育 " 

}, 

{ 

"id":"04000020", 

"title":" 新 闻 20150501000020"， 
"category":" 教 育 " 

}] 


这 里 要 注意 新 闻 id 的 编码 规则 。 例 如 04000020, 前 2 位 数字 (04) 表 示 新 闻 类 别 的 编 
号 (04 表示 教育 ) ,后 6 位 (000020) 表 示 新 闻 的 流水 号 。 

通过 对 JSON 对 象 的 遍历 ,动态 生成 新 闻 分 类 和 新 闻 详 细 超 链接 的 HTML 代码 , 调 
jQuery 的 html() 方 法 ,将 HTML 代码 填充 到 对 应 的 容器 中 。 

在 动态 生成 超 链 接 时 ,没有 指定 二 a 二 元 素 的 href 属性 ,而 是 将 相关 的 数据 存储 到 
反 a> 元 素 的 自 定 义 属性 (data- 开 头 ) 中 。 最 后 生成 的 超 链接 代码 如 下 所 示 : 


<ahref ="#" data- id= "01" data- name= "要闻"> 要 闻 </a> 
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<a href ="#" data- id="04000020" data- categoryId= "04" data- categoryName = "要 闻 "> 新 
闻 标 题 </a> 


将 超 链 接 代码 填充 到 容器 后 ,使 用 jQuery, 为 每 个 二 a 二 元 素 绑 定 click 事件 处 理 函 
数 。 相 关 代 码 如 下 所 示 。 
1) 绑 定 新 闻 分 类 超 链 接 的 click 事件 


$ ('#nav'). html (htm); 

$ ('#nav'). find( 'a'). bind( 'click', function( ){ 
ViewList( 

$ (this).attr( 'data— id'), 

$ (this).attr( 'data ~ name') 

); 

DD); 


2) 绑 定 新 闻 详 细 超 链接 的 click 事件 


$ ('#1ist'). html(htm); 

$ ('#1ist'). find( 'a'). bind( 'click', function( ){ 
viewNews( 

$ (this).attr( 'data— id'), 

$ (this).attr( 'data — categoryId'), 

$ (this).attr( 'data — categoryName') 

); 

D); 


需要 注意 的 是 ,这 两 个 bind 方法 必须 在 getJSON 方法 的 回调 函数 中 调用 。 

单 击 新 闻 分 类 超 链接 将 调用 viewList() 函 数 ; 单 击 新 闻 详 细 超 链接 ,将 调用 
viewNews() 函 数 。 这 两 个 函数 在 其 他 页 面 中 也 需要 使 用 ,所 以 将 其 定义 放 在 独立 的 
fun.js 文件 中 ,以 便 重用 。 

fun.js 代码 如 下 所 示 : 


function viewNews(news, categoryId, categoryName){ 

window. localStorage. setItem( 'newsId', news); 

window. localStorage. setItem( 'categoryId', categoryId); 
window. localStorage. setItem( 'categoryName', categoryName); 
window. location = 'news. htm'7 

} 


function viewList(categoryId, categoryName){ 

window. localStorage. setItem( 'categoryId' categoryId) ; 
window. localStorage. setItem( 'categoryName', categoryName); 
window. location = 'list. htm'7 


} 


两 个 函数 的 思路 是 一 致 的 : 先 将 参数 中 的 值 ( 新 闻 编 号 、 列 表 编 号 、 类 别名 称 ) 存 储 到 
localStorage(HTML 本 地 存储 ) 中 ,然后 使 用 window. location 重 定向 网 页 。 
相关 的 CSS 代码 如 下 所 示 : 
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body{ 

padding:0px; 

margin:0px; 

font ~ size:14px; 

} 

.nav{ 

padding:5px; 

Color: # ffffff; 

background — color: # 2A75D0; 
border — top:1pxsolid# 2a75d0; 
} 

.nav>a{ 

Color: # ffffff; 

text ~ decoration:none; 

} 

,index — list{ 

margin:S5px0; 

} 

.index— list > h2{ 

font — size:1. 5em; 

font - weight :bold; 

color: #000; 

padding: 5px; 

margin: Opx; 

border — top:1px solid # 9DCAEE; 
background - color: # ebf7fe; 
border - bottom:1px solid #9dcaee; 
} 

.index — list > div{ 

font - size:1lem; 

line— height:1.5em; 

padding — left:10px; 

} 

.index— list > div>a{ 

text — decoration:none; 


} 


4.5 新 闻 列 表 模 块 


当 用 户 单 击 首页 上 方 的 新 闻 分 类 超 链 接 后 , 跳 转 到 该 页 面 。 该 页 面 的 工作 是 把 当前 
分 类 下 的 前 25 条 新 闻 列 表 显 示 出 来 。 

在 本 项 目 中 ,该 页 面 分 为 上 、 下 两 个 区 域 。 上 方 用 于 导航 .显示 首页 连接 和 当前 分 类 
的 名 称 ; 下 方 的 区 域 用 于 显示 新 闻 标题 列表 。 

页 面 布 局 如 图 4-7 所 示 。 

本 页 面 与 首页 类 似 。 由 于 新 闻 列 表 页 的 内 容 是 由 JavaScript 动态 生成 的 ,因此 只 需 
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要 上 、 下 两 个 div, 上 方 div 中 的 新 闻 类 别名 称 由 后 台 的 JSON 数据 负责 指定 。 
具体 代码 如 下 所 示 : 


< div class = "nav"> 
<a href = "index.htm"> 新 闻 首 页 </a> 
&gt; 
< span id= "spanCategory"></span> 
</div> 
<div id= "list"> 


</div> 
其 中 ,spanCategory 用 于 显示 当前 列表 显示 的 新 闻 分 类 ; list 为 新 闻 列 表 , 显 示 top25 
的 新 闻 。 


top25. json( 列 表 页 显示 top25 新 闻 列 表 ) 中 的 内 容 结构 如 下 所 示 : 


[{ 

"id":"01000001", 

"title" :" 要 闻 01000001"， 
"category" :" 要 闻 " 

}, 


{ 

"id":"01000025", 
"title":" 要 闻 01000025"， 
"category":" 要 闻 " 

}, 

{ 

"id":"02000001", 
"title":" 国 内 02000001"， 
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"category":" 国 内 " 
}, 


{ 

"id":"02000025", 
"title":" 国 内 02000025"， 
"category":" 国 内 " 

}, 

{ 

"id":"03000001", 

"title" :" 科 技 03000001"， 
"category" :" 科 技 " 

}, 


{ 

"id" :"03000025"， 

"title" :" 科 技 03000025"， 
"category" :" 科 技 " 

}, 

{ 

"id":"04000001", 
"title":" 教 育 04000001"， 
"category" :" 教 育 " 

}, 


{ 

"id":"04000025", 

"title" :" 教 育 04000025"， 
"category" : "教育 " 

有 


list, htm 首先 使 用 jQuery 的 geUSON 方法 获取 远程 JSON 数据 ,然后 动态 生成 HTML 
代码 并 填充 到 容器 中 ,再 对 每 个 超 链接 动态 绑 定 click 事件 。 该 过 程 与 index 相似 。 


具体 代码 如 下 所 示 : 


Var categoryId; 

Var categoryName; 

$ (document) . ready(function(){ 

if (!window. localStorage) { 

alert( ' 当 前 浏览 器 不 支持 本 地 存储 '); 
window. location = 'index. htm'; 


} 


categoryId = window. localStorage. getItem( 'categoryId'); 
categoryName = window. localStorage. getItem( 'categoryName'); 


if (1categoryId) { 
alert(' 新 闻 类 别 未 指定 '); 
window. location = 'index. htm'; 


} 
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$ ('# spanCategory'). html (categoryName); 


$ .getJSON( 'data/top25. json', function( json){ 

Var htm = ''; 

for (var i in json) { 

if (categoryId != json[i]. id. substring(0,2))continue; 
htm += ‘<div>'; 

htm += '<a href="#"' 

+ "data-id="' + json[i].id + " 

+ 'data— categoryId="' + json[i].id. substring(0,2) + "' 
+ 'data— categoryName ="' + json[i].category + '"' 
+ >'+ json[il].title + '‘</a>'; 

htm += '</div>'; 

} 

$ ('#1ist'). html(htm); 

$ ('#1ist'). find('a').bind('click', function( ){ 
viewNews( 

$ (this).attr( 'data— id'), 

$ (this).attr( 'data — categoryId'), 

$ (this).attr( 'data — categoryName') 


由 于 使 用 了 localStorage(HTML 本 地 存储 ) ,所 以 需要 检测 浏览 器 对 localStorage 的 
兼容 性 。 如 果 不 支持 ,提示 错误 后 返回 首页 。 
具体 代码 如 下 所 示 : 


if(!window. localStorage){ 
alert( ' 当 前 浏览 器 不 支持 本 地 存储 '); 
window. location = 'index. htm'; 


} 


在 该 网 页 中 ,通过 获取 localStorage 中 的 categoryld 以 及 categoryName 这 两 个 数据 
来 确定 要 显示 的 新 闻 分 类 。 如 果 localStorage 中 没有 这 两 个 对 象 ( 特 别 是 categoryId) , 则 
提示 错误 后 返回 首页 。 


categoryid = window. localStorage. getTten( ‘categoryid'); 
categoryName = window. localStorage. getItem( 'categoryName'); 
if(!categoryId){ 

alert(' 新 闻 类 别 未 指定 '); 

Window. location = 'index. htm'7 


} 
正确 获取 categoryName 后 , 就 可 以 将 spanCategory 中 的 内 容 指定 为 


categoryName。 


具体 代码 如 下 所 示 : 
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$ ('# spanCategory'). html (categoryName); 
相关 的 CSS 代码 如 下 所 示 : 


body { 

padding:0px; 

margin:0px; 

font 一 size:14px; 

} 

.nav { 

padding:5px; 

Color: # ffffff; 

background — color: # 2A75D0; 
border — top:1px solid #2a75d0; 
} 

.nav>af{ 

color: # ffffff; 

text — decoration:none; 

} 

.list { 

margin:5px 0; 

} 

.list>div{ 

font — size:1em; 

line — height :2em; 

padding - left:10px; 

border - bottom:1px solid # eeeeee; 
} 

.list>div>af{ 

text — decoration:none; 


} 


4.6 新 闻 阅 读 模块 


当 用 户 单 击 首页 或 列表 页 中 的 某 条 新 闻 标 题 后 ,会 跳 转 到 该 页 面 。 该 页 面 的 工作 是 
把 当前 新 闻 内 容 显示 出 来 。 

页 面 布局 如 图 4-8 所 示 。 

新 闻 页 的 数据 是 一 篇 文章 。 通 常情 况 下 ,这 篇 文章 的 内 容 存 储 在 数据 库 中 ,需要 使 用 
动态 网 页 编程 语言 (PHP、Java、. Net 等 ) 读 取 。 由 于 本 书 不 涉及 该 部 分 内 容 , 特 将 具体 的 
新 闻 数 据 放 在 data 目录 下 .例如 01000001. htm, 其 中 01000001 为 该 新 闻 的 编号 。 

具体 代码 如 下 所 示 : 

< div class = "nav"> 

<a href = "index. htm"> 新 闻 首 页 </a> 


&gt; 
<aid= "spanCategoryLink" href ="#"></a> 


I 
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首页 > 分 类 名 称 > 正文 
新 闻 标 题 
发 布 日 期 
图 4-8 阅读 页 布局 

&gt; 

正文 
</div> 
< div id = "news" class = "news"> 
</div> 
spanCategoryLink 为 连接 到 list. htm 的 一 个 超 链接 , 超 链接 中 的 文字 需要 根据 具体 

的 新 闻 类 别 指定 。 


id 为 news 的 div 元 素 是 新 闻 内 容 的 容器 。 当 跳 转 到 该 页 面 时 ,使 用 jQuery 的 get 
方法 从 远程 获取 指定 新 闻 的 HTML 内 容 并 填充 到 div 中 。 
具体 代码 如 下 所 示 : 


var categoryId; 

Var categoryName; 

Var newsId; 

$ (document). ready(function () { 

if(!window. localStorage){ 

alert( ' 当 前 浏览 器 不 支持 本 地 存储 '); 

window. location = 'index. htm'; 

} 

newsId = window. localStorage. getItem( ‘newsId'); 
categoryId = window. localStorage. getItem( 'categoryId'); 
categoryName = window. localStorage. getItem( 'categoryName'); 
if (!newsId) { 

alert( ' 新 闻 未 指定 '); 

window. location = 'index. htm'; 

if (!categoryId) { 
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alert( ' 新 闻 类 别 未 指定 '); 
window. location = 'index. htm'; 


} 


$ ('# spanCategoryLink'). html (categoryName) 
.bind('click', function () { 
viewList(categoryId, categoryName); 
D); 
$ ('#news').html(' 新 闻 加 载 中 ... '); 
$ .get('data/'+ newsId+ '. htm' function(data) { 
$ ('#news'). html (data); 
D); 
}); 


上 述 代 码 中 有 3 个 全 局 变量 : categoryId、categoryName 和 newsId, 分别 从 
localStorage 中 获取 新 闻 类 别 编号 ,新 闻 类 别名 称 和 新 闻 编 号 。 如 果 获 取 失 败 , 跳 转 到 
index. htm 。 

成 功 获取 新 闻 类 别 编号 以 及 名 称 后 ,使 用 jQuery 的 HTML 方法 指定 超 链 接 的 文字 ， 
再 使 用 bind 方法 绑 定 click 事件 ,实现 单 击 超 链接 跳 转 到 list. htm。 

成 功 获取 新 闻 编 号 后 ,使 用 jQuery 的 get 方法 ,获取 远程 的 HTML 文件 内 容 。 值 得 
注意 的 是 ,这 里 get 的 第 一 个 参数 的 含义 是 远程 URL, 需 要 使 用 字符 串 连 接 的 方式 动态 
生成 。 获 取 后 ,直接 将 得 到 的 内 容 填 充 到 news 容器 中 。 

其 实 ,获取 的 新 闻 HTML 页 的 内 容 是 一 个 HTML 片段 ,只 需要 包含 新 闻 的 标题 、 发 
布 日 期 和 正文 。 

具体 代码 如 下 所 示 : 

<h2 > 

标题 

</h2 > 

<h3> 

发 布 时 间 : 2015 年 05 月 04 日 

</h3 > 

<div> 

新 闻 内 容 

</div> 

在 HTML 片段 中 ,很 规则 地 使 用 h2 放置 新 闻 标题 ,h3 放置 新 闻 发 布 日 期 ,div 放置 
新 闻 正 文 。 这 样 的 好 处 是 ,只 要 指定 news 样式 的 子 元 素 样式 ,就 可 以 很 方便 地 设置 整个 
新 闻 的 样式 。 

相关 CSS 代码 如 下 所 示 : 

body{ 

padding:0px; 

margin:0px; 

font — size:14px; 


} 


.nav{ 


[ 页 目 4 提高 页 目 : 移动 新 闻 网 站 前 台 设计 攻心 | 


padding:5px; 

Color: # fffffFf; 
background — color: # 2A75D0; 
border — top:1pxsolid# 2a75d0; 
} 

.nav>al{ 

Color: # ffffff; 

text — decoration:none; 
} 

.news{ 

margin:5px0; 

} 

.news > h2{ 

font ~ size:2em; 

line— height:2em; 
margin:0px;padding: Opx; 
text ~ align:center; 
font — weight:bold; 

} 

.news > h3{ 

font — size:1lem; 

line — height:2em; 
margin:0px;padding: 0px; 
text ~ align:center; 
font — weight :normal; 

} 

.news > div{ 

font — size:1em; 

line— height:1.5em; 
text ~ align: left; 
margin:10px; 

} 


4.7 项 目 进 阶 


因为 是 教学 项 目 , 所 以 本 项 目 设计 得 相对 简单 .有 很 多 不 足 之 处 ,这 里 列举 两 个 。 

(1) 本 项 目 只 使 用 了 一 级 新 闻 分 类 ,其 实 可 以 根据 不 同 的 需要 .将 新 闻 分 类 划分 成 任 
意 多 级 ,只 需要 调整 category. json 即 可 。 

(2) 本 项 目 中 ,所 有 的 新 闻 列 表 都 只 显示 一 个 标题 ,其 实 可 以 为 每 条 新 闻 增 加 一 个 简 
介 (Description) 属 性 ,并 显示 到 新 闻 列 表 中 。 这 样 ,用 户 在 列表 中 就 可 以 简单 地 查看 新 闻 
的 简短 内 容 , 决 定 是 否 要 点 击 查 看 明细 。 


4.8 课外 实践 


在 网 上 搜索 “内 容 管理 系统 (CMS)” 的 相关 信息 , 找 一 个 免费 或 开源 的 CMS 下 载 、 安 
装 , 并 尝试 简单 地 使 用 。 


> 
1 
| 

由 


知识 目标 : 
。 掌握 JavaScript 操作 HTML5 本 地 存储 的 方法 
。 掌握 JavaScript 操作 JSON 格式 数据 的 方法 
能 力 目 标 : 
。 能 使 用 jQuery 操作 HTML5 本 地 存储 
。 能 使 用 jQuery 操作 JSON 格式 数据 


自主 项 目 : 个 人 记 账 助手 设计 置 


5.1 项 目 介绍 


本 项 目 也 是 一 个 面向 手机 端的 网 页 应 用 。 个 人 记 账 软件 是 一 种 最 常见 的 理财 类 软 
件 ,适合 在 校 学 生 或 者 刚 步 人 社会 的 年 轻 人 使 用 。 项 目 分 为 收 支 登记 、 收 支 查看 和 收 支 统 
计 3 个 功能 模块 。 通 过 每 日 记 账 ,用 户 可 以 清楚 地 了 解 自己 的 钱 的 去 向 ,更 好 地 节制 自 
己 ,避免 成 为 "月光 族 ”, 甚 至 “日 光 族 ”。 

本 项 目的 实现 分 为 3 部 分 : 四 网 站 规划 与 设计 ; 加 设计 网 站 用 于 存储 的 数据 结构 
(JSON 格式 ); @@ 系 统 编码 和 实现 。 

界面 整体 效果 如 图 5-1 所 示 。 


支出 300, 收 入 :5200 [新 增 ] [清空 ] 支 册 300 收 入 :5200 [新 增 ] [清空 | 
日 期 事项 金额 lB 购物 "| 
2013-2-10 日常 购物 150 LU | 
2013-2-10 。 学 习 资料 100 lo Jo123456789C 
2013-2-10 。 上 网 话费 50 
2013-2-10 。 家庭 汇款 5000 | 保存 || 返回 | 
2013-2-10 打工 收入 200 由 A 
收入 合计 。 5200 
支出 合计 300 
账户 剩余 ”4900 


图 5-1 个 人 记 账 软件 界面 效果 
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5.2 知识 准备 


HTML5 提供 了 localStorage 技术 .实现 客户 端 (浏览 器 端 ) 存 储 数据 。 在 此 之 前 ,要 
在 客户 端 存储 数据 (例如 , 记 住 用 户 登录 账号 等 信息 ) ,都 是 由 cookie 完成 。 但 是 cookie 
不 适合 大 量 数据 存储 (一 般 不 超过 4KB) ,因为 它们 由 每 个 对 服务 器 的 请 求 来 传递 ,使 得 
cookie 速度 很 慢 ,而 且 效率 不 高 。 
对 于 不 同 的 网 站 ,localStorage 数据 存储 于 不 同 的 区 域 , 并 且 一 个 网 站 只 能 访问 其 自 
身 的 数据 (根据 网 站 的 域名 来 识别 ) 。 
访问 localStorage 需要 使 用 JavaScript 代码 来 实现 ,例如 : 
< script type = "text/javascript"> 
localStorage. UserName = "Rdmin" 
document. write( localStorage. UserName); 
</script > 
需要 注意 的 是 ,localStorage 存储 数据 的 格式 为 字符 串 。 对 于 一 些 比较 复杂 的 数据 类 
型 (如 数组 、 对 象 ) ,可 以 先 转换 为 JSON 格式 的 字符 串 ,再 进行 存储 ,例如 


var obj = { name:'Admin',age:24 } 
var str = JSON. stringify(obj); 


// 存 人 

localStorage. obj = str; 

// 读 取 

str = localStorage. obj; 

// 重 新 转换 为 对 象 

obj = JSON. parse(str); 

在 上 述 代码 中 ,JSON. stringify() 用 于 将 对 象 转换 为 字符 串 ,JSON. parse() 用 于 将 字 
符 串 转 换 为 对 象 。 


5.3 网 站 规划 与 设计 


本 项 目 主要 包括 如 下 功能 。 

(1) 收 支 登记 : 提供 收 支 录 入 表单 ,用 于 新 增 一 笔 收 支 记录 。 

(2) 收 支 查看 : 提供 收 支 表格 查询 功能 ,并 可 以 对 某 次 收 支 记录 进行 修改 和 删除 。 
(3) 收 支 统计 : 统计 本 阶段 的 收入 合计 ,支出 合计 以 及 账户 余额 。 


531 账目 登记 表单 设计 


账目 登记 表单 在 用 户 录入 和 编辑 收 支 情况 时 用 到 ,其 中 用 到 文本 框 、 下 拉 列 表 框 \ 按 
钮 这 3 种 控件 。 该 表单 一 共有 5 行 ,只 不 过 每 一 行 不 是 表格 中 的 行 ,而 是 一 个 DIV。 
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每 一 行 中 大 致 分 成 两 个 部 分 : 前 面 是 一 


两 个 SPAN。 
表单 的 HTML 元 素 结构 如 图 5-2 所 示 


个 标签 ,后 面 是 一 个 用 于 录入 的 控件 ,分 别 是 


- 


<DIV Class="Listltem"> 
</DIV> 


~ 


<DIV Class="FormLabe"> 
</DIV> 


-| 


<DIV Class="FormControl"> 
</DIV> 


图 5-2 表单 页 结构 


具体 实现 代码 如 下 所 示 : 


< div class = "list— item"> 
< span class = "form— label"> 
事项 : 
</span> 
< span class = "form— control"> 


< select id = "ddlTitle" style= "width:70% "> 


</select> 
</span > 
</div> 
<divclass= "list— item"> 
< span class = "form— label"> 
说 明 : 
</span> 
< span class = "form— control"> 


< input type 
</span> 
</div> 
<divclass= "list— item"> 
< span class = "form— label"> 
金额 : 


"text" id = "txtContent" style = "width:70%" /> 


</span> 
< span class = "form - control"> 
< input type = "text" id = "txtAmount" style= "width:20%" /> 
</span> 
</div> 
<div class= "list— item"> 
< span class = "form- label"> 
类 型 : 
</span > 
< span class = "form- control" id= "spanType" style= "width:35% ;"> 
</span> 
</div> 
<divclass= "list— item"> 
< input type = "button" id = "btnSave" value = "保存 " onclick = "Save()" /> 
< input type = "button" id = "btnDelete" value = "删除 "onclick = "Delete()" /> 
返回 " onclick = "Return()" /> 


< input type = "button" id= "btnReturn" value= 
</div> 


相关 CSS 样式 代码 如 下 所 示 : 


body { 
font — size: lem; 
font — family: Arial; 
margin: Opx; 
padding: Opx; 
} 
input { 
font — size: lem; 
font — family: Arial; 
} 
select { 
font — size: lem; 
font — family: Arial; 
} 
.list— item { 
line — height: 40px; 
border — bottom: 1px solid# CCCCCC; 
} 
.form— label { 
width: 20 % ; 
} 
.form— control { 
width: 75 % ; 


532 账目 记录 列表 设计 


账目 记录 列表 界面 是 一 个 HTML 表格 ,第 一 行 是 列 名 ,最 后 有 3 行 汇总 数据 ,中 间 
的 是 各 行 的 收 支 记录 行 ( 这 些 记录 行 在 后 面 用 JavaScript 循环 填充 )。 这 里 要 注意 ,对 于 
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每 列 的 width, 要 用 % 来 设置 。 为 了 方便 起 见 , 为 每 列 创建 一 个 CSS 类 。 
具体 实现 代码 如 下 所 示 : 


<table style = "border - collapse:collapse;width:100% ; "> 
<tr class = "ListItem"> 
<td class = "ListItemDate" style= "text 一 align:center; "> 
日 期 
</td> 
<td class = "ListItemTitle"” style= "text — align:center;"> 
事项 
</td> 
<td class = "ListItemAmount" style= "text— align:center;"> 
金额 
</td> 
< td class = "ListItemType" style= "text— align:center;"> 
性 质 
</td> 
</tr> 
收 支 记录 行 ... 
<tr class= "ListItem"> 
<td class = "ListItemDate" style= "text— align:center;"> 


</td> 
<td class = "ListItemTitle" style= "text— align:center;"> 
收入 合计 
</td> 
<tdclass= "ListItemAmountIn" style= "text— align:center;"> 
</td> 
<td class = "ListItemType" style= "text— align:center;"> 
</td> 
</tr> 


<tr class = "ListItem"> 
<td class = "ListItemDate"” style = "text — align:center;"> 


</td> 
< td class = "ListItemTitle" style= "text — align:center;"> 
支出 合计 
</td> 
<td class = "ListItemhmountOut" style = "text— align:center;"> 
</td> 
< td class = "ListItemTYpe"” style = "text - align:center;"> 
</td> 
</tr> 


<tr class = "ListItem"> 
<td class = "ListItemDate"” style = "text — align:center;"> 


</td> 

<td class = "ListItemTitle" style = "text- align:center;"> 
账户 剩余 

</td> 


<td class = "ListItemhmount”style = "text — align:center;"> 
</td> 
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< td class = "ListItemType" style = "text— align:center;"> 
</td> 


</tr> 
</table> 


533 用 户 操作 流程 设计 


与 用 户 体验 相关 的 不 仅仅 是 用 户 界 面 , 还 有 用 户 的 操作 流程 。 对 于 这 种 使 用 频率 比 
较 高 的 应 用 ,一 套 方便 的 操作 流程 是 十 分 重要 的 。 


在 本 项 目 中 ,为 用 户 设计 了 两 个 操作 流程 : 录入 收 支 情况 和 更 新 收 支 情况 ,如 图 5-3 


所 示 。 
打开 网 址 打开 网 址 
显示 首页 显示 首页 
自动 汇总 自动 汇总 
1 1 
_ | 查看 本 阶段 查看 本 阶段 
汇总 数据 汇总 数据 
单 击 单 击 单 笛 。 ] 单 击 单 击 
“返回 “新 增 ” “返回 ” | 某 条 “| 删除 
按钮 按 铀 按钮 按钮 按钮 
se 单 击 。” 单 击 = 
显示 慨 支 | 保存” “保存 " 归 生 全 
录入 页 面 按钮 按钮 录入 页 面 
PSN 1 
依次 输入 依次 输入 
各 项 数据 各 项 数据 


图 5-3 操作 流程 


5.4 数据 结构 设计 


在 本 项 目 中 ,需要 记录 用 户 录 入 的 收 支 数据 。 如 果 是 普通 的 手机 应 用 ,将 数据 存储 在 
本 地 文件 或 数据 库 中 ; 如 果 是 面向 PC 的 网 页 ,一 般 将 数据 存储 在 服务 器 端的 数据 库 中 。 
但 是 ,本 项 目 是 一 个 面向 手机 端的 网 页 应 用 ,考虑 到 存储 数据 不 大 ,因此 将 数据 存储 在 支 
持 HTML5 的 浏览 器 的 本 地 存储 中 。 

由 于 HTML5 本 地 存储 的 数据 格式 仅仅 支持 字符 串 格式 ,所 以 本 项 目 有 一 个 比较 重 
要 的 步骤 就 是 设计 便于 转换 的 数据 格式 。 


541 账目 记录 项 


账目 记录 项 是 指 某 一 次 用 户 录入 的 数据 项 ,由 账目 登记 表单 接收 用 户 录入 的 数据 , 主 


要 有 以 下 数据 项 : 日 期 事由 ,说明 、 金 额 \ 性 质 。 另 外 ,为 了 能 唯一 区 别 这 条 数据 项 ,给 其 
增加 一 个 账目 编号 。 


在 网 页 中 ,使 用 JavaScript 语言 设计 一 个 类 来 表示 该 数据 项 ,有 以 下 5 个 成 员 变量 。 
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。id( 账 目 编号 : 自 增长 int 类 型 ) 

"title( 账 目 事由 : string 类 型 ) 

。 content( 账 目 说 明 : string 类 型 ) 

。 amount( 账 目 金额 : int 类 型 ) 

。 direct( 收 支 方向 : int 类 型 ,1 表示 收入 、 一 1 表示 支出 ) 

。 date( 账 目 日 期 : string 类 型 。 为 了 列表 显示 方便 ,直接 存储 时 间 类 型 的 数据 转换 
字符 串 类 型 ) 

最 终 的 记录 项 JavaScript 实现 ,代码 如 下 所 示 : 


function record( id, title, content, amount, direct) { 
this. id = id; 
this. title = title; 
this. content = content; 
this.amount = amount; 
this. direct = direct; 
this. date = new Date(); 
this. date = this. date. getFullYear() 


(this. date. getMonth() + 1) 


this. date. getDate( ) 


+ + + + 十 


this. Add = Add; 
this. Update = Update; 
this. Delete = Delete; 


function Add() { 
var list = GetWebStorage(); 


if (this.id == ') { 
this. id = localStorage. AccountIndex; 
localStorage. AccountIndex = 
parseInt(localStorage. AccountIndex) + 1; 


list. push({ 
id: this. id, 
title: this. title, 
content: this. content, 
amount: this.amount, 
direct: this. direct, 
date: this. date 

DD); 

SetWebStorage( list); 
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function Update() { 
var list = GetWebStorage(); 
for (i = 0; i<list.length; i++) { 
if (list[i].id == this.id) { 
list[il].title = this.title; 
list[il].content = this.content; 
list[il].amount = this.amount; 
list[il].direct = this.direct; 
} 
} 
SetWebStorage( list); 
} 


function Delete() { 

var list = GetWebStorage(); 

var newlist = []; 

for (i = 0; i<list.length; i++) { 
if (list[i].id != this.id) { 

newlist. push(list[i]); 

} 

} 

SetWebStorage( newlist); 


} 


数据 将 实际 存储 到 HTML5 的 Web Storage 存储 区 域内 ,其 存储 的 字符 串 格式 为 : 


{ 
rid':1, 
了 title': 日 常 购物 
'content': ' 购 物 说 明 ', 
'amount':150, 
‘date':'2013—01-01' 


542 账目 记录 列表 


从 程序 设计 的 角度 来 看 ,账目 记录 列表 是 账目 记录 的 一 个 数组 ,所 以 不 需要 特别 设计 一 
个 JavaScript 类 来 处 理 , 但 是 可 以 定义 几 个 公共 方法 用 于 访问 该 列表 : GetWebStorage()、 


SetWebStorage() .Sum() Find() 。 
具体 实现 代码 如 下 所 示 : 


// 从 localStorage 获取 账目 记录 列表 对 象 AccountList 
// 如 果 AccountList 不 存在 则 创建 
// 将 获取 的 字符 串 转 换 为 数组 对 象 并 返回 
function GetWebStorage() { 
证 (!localStorage. AccountList) { 
localStorage. AccountIndex = 1; 
return new Array(); 
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} 


return eval('(' + localStorage. AccountList + ')'); 


} 


// 将 指定 的 账目 记录 列表 转换 为 字符 串 并 保存 到 localStorage 
function SetWebStorage(list) { 

localStorage. AccountList = JSON. stringify(list); 
} 


// 清 空 localStorage 中 存储 的 数据 
function RemoveWebStorage() { 
window, localStorage. clear( ); 


} 


// 对 localStorage 中 数据 汇总 
// 返 回 总 收入 ,总 支出 结余 
function Sum(list) { 
var sumAmount = 0; 
var outAmount = 0; 
var inAmount = 0 
for (i = 0; i<list.length; i++) { 
sumAmount += parseFloat(list[i].amount) * parseFloat(list[i].direct); 
if (list[i].direct == 1) { 
inAmount += parseFloat(list[i].amount); 
} else{ 
outAmount += parseFloat(list[i].amount); 
} 
} 
return { 
sumAmount: sumAmount, 
inAmount: inAmount, 
outAmount: outAmount 
}; 
} 
// 根 据 账目 编号 ,查找 相应 的 账目 记录 
// 未 找到 则 返回 nu11 
function Find(list, id) { 
for (i = 0; i<list.length; i++) { 
if (list[i].id == id) { 
return list[i]; 
} 
} 


return null; 


543 账目 编号 


在 项 目 中 ,账目 编号 是 为 账目 记录 新 增 的 一 个 类 似 数 据 库 中 主键 的 信息 ,本 身 没 有 什 
么 含义 ,其 作用 是 查找 和 定位 。 这 里 采用 类 似 于 数据 库 中 自 增长 类 型 的 数据 类 型 ,从 1 开 


始 ,每 次 递增 1 。 

具体 存储 时 ,使 用 一 个 存储 对 象 AccountIndex, 用 于 保存 当前 最 大 的 账目 编号 。 下 次 再 
创建 账目 记录 时 ,其 账目 编号 就 等 于 当前 的 AccountIndex 十 1。 存 储 后 ,AccountIndex 自 
增 1。 

实现 代码 如 下 所 示 : 

(1) 在 GetWebStorage() 方 法 中 ,如 果 AccountIndex 不 存在 ,创建 : 


localStorage. AccountIndex = 1; 
(2) 在 record 的 Add() 方 法 中 : 


this. id = localStorage. AccountIndex; 
localStorage. AccountIndex = 
parseInt(localStorage. AccountIndex) + 1; 


5.5 系统 编码 实现 


551 初始 化 处 理 


(1) 定义 全 局 变量 : TitleItem( 收 支 事 由 ) .curId( 当 前 编辑 的 账目 编号 ) 。 

(2) 绑 定 账目 列表 。 

(3) 绑 定 账目 录入 表单 中 * 事 由 ”下 拉 框 的 数据 。 

(4) 显示 账目 列表 DIV ,隐藏 账目 录 和 表单 DIV 。 

在 这 个 过 程 中 ,有 一 点 做 了 特殊 处 理 : 保存 账目 记录 时 ,在 “事由 ”这 个 数据 上 ,为 了 
节省 空间 ,保存 的 是 该 事由 的 编号 (TitleItem 的 value 值 ) ,但 是 显示 时 需要 显示 文本 ,所 
以 定义 了 一 个 GetTitleTextByValue 方法 。 根 据 参 数 指定 的 value 到 TitleItem 中 查找 对 
应 的 text。 如 找到 , 则 返回 text; 如 果 没 有 找到 , 则 返回 未 知事 项 。 

// 全 局 变量 账目 事由 列表 

var TitleItem = [{ 

text: ,一 日 三 餐 " 
value: '1' 


text: ' 日 常 购物 '， 


value: '2 


text: ' 学 习 资料 '， 


value: '3 


text: ' 上 网 话费 '， 
i 


value: 
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{ 
text: "其 他 消费 … 
value: "99 

}, 

{ 
text: ' 家 庭 汇款 '， 
value: '101' 

}, 

{ 
text: ' 打 工 收入 '， 
value: '102' 

}, 

{ 
text: ' 学 校 奖励 '， 
value: '103' 

}, 

{ 
text: ' 其 他 收入 '， 
value: '199 


}]; 
// 全 局 变量 ”当前 编辑 的 账目 编号 


var curId = 0; 


//iqvery 初始 化 函数 

$ (document). ready(function() { 
LoadList(); 
$ ('#divDetail'). hide(); 
$ ('#divList'). show(); 
LoadTitle( ); 

D); 


// 绑 定 账目 列表 
function LoadTitle() { 
for (index = 0; index < TitleItem. length; index++) { 
$('#ddlTitle'). append( '< option value = "' + TitleItem[ index]. value + '">'+ 
TitleItem[ index]. text + '</option>') 
} 
} 


// 根 据 事由 编号 ,查找 事由 文本 
function GetTitleTextByValue(value) { 
for (index = 0; index < TitleItem. length; index++) { 
if (TitleItem[ index].value == value) return TitleItem[ index]. text; 
} 
return ' 未 知事 项 '; 
} 


// 核 心 方 法 ” 绑 定 账 目 列表 
function LoadList() { 


curId = 0; 
var list = GetWebStorage(); 
if (list == null || list == undefined) return; 


var sum = Sum(list); 


$(" 
var htm = '<table style= 


htm 
htm 


htm 


htm 


htm 


htm 


# spanSum" ) . html(' 支 出 :' + sum.outAmount + ', 收 入 :' + sum. inAmount); 


border — collapse:collapse;width:100 % ;">"'; 
+= '<tr class= "ListItem">'; 
+= '<td class= "ListItemDate" 
style = "text — align:center; "> 日 期 </td>'; 
+= '<td class= "ListItemTitle" 
style = "text - align:center; "> 事项 </td>'; 
+= '<td class= "ListItemAmount" 
style = "text - align:center; "> 金额 </td>'; 


+= '<td class= "ListItemType" 
style= "text - align:center;"> 性 质 </td>'; 
+= '</tr>'; 


for (i = 0; i< list.length; i++) { 


htm += '<tr onclick = "MouseClickRow(this,' + list[il].id + ')" class= "ListItem">'; 
try{ 

htm += '<td class = "ListItemDate">' + DateToString(list[i].date) + ‘</td>'; 
} catch(err) {} 
htm += <tdclass= "ListItemTitle">' + GetTitleTextByValue(list[i].title) + ‘</td>'; 


if (list[i].direct == 1) { 
htm += '<td class= "ListItemhmountIn">' + list[i].amount + ‘</td>'; 
htm += '<td class="ListItemType"> 收 入 </td>'; 

} else{ 
htm += '<tdclass= "ListItemhmountOut">' + list[i].amount + ‘</td>'; 
htm += '<td class = "ListItemType"> 支 出 </td>'; 


} 
htm += '</tr>'; 
} 
htm += '<tr class= "ListItem">'; 
htm += '<td class= "ListItemDate” 
style = "text — align:center;"></td>'; 
htm += '<td class= "ListItemTitle" 
style= "text -align:center;"> 收 入 合计 </td>'; 
htm += '<td class= "ListItemAmountIn" 
style= "text — align:center;">' + sum. inAmount + ‘</td>'; 
htm += '<td class= "ListItemType”" 
style = "text — align:center;"></td>'; 
htm += '</tr>'; 
htm += '<tr class= "ListItem">'; 
htm += '<td class= "ListItemDate" style= "text— align:center;"></td>'; 
htm += '<td class= "ListItemTitle" 


htm 


style= "text -align:center;"> 支 出 合计 </td>'; 
+= '<tdclass= "ListItemAmountOut" 
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style= "text — align:center;">' + sum.outAmount + ‘</td>'; 
htm += '<td class= "ListItemType" 

style = "text — align:center;"></td>'; 
htm += ‘</tr>'; 
htm += '<tr class= "ListItem">'; 
htm += '<td class= "ListItemDate" 

style = "text — align:center;"></td>'; 
htm += '<tdclass= "ListItemTitle" 

style = "text -align:center;"> 账 户 剩余 </td>'; 
htm += '<td class= "ListItemAmount" 

style = "text — align:center;">' + sum. sumAmount + ‘</td>'; 
htm += '<td class= "ListItemType" 

style= "text ~ align:center;"></td>'; 

htm += '</tr>'; 


htm += "</table>"; 
$ ('#divList'). html (htm); 
} 


552 新 增 或 修改 消费 记录 


新 增 消费 记录 是 单 击 了 “新 增 " 按 钮 之 后 触发 的 。 触 发 后 ,显示 账目 录入 DIV。 用 户 
录入 数据 后 , 单 击 “ 保 存 " 按 钮 ,将 数据 新 增 到 HTML5 本 地 存储 中 ,重新 绑 定 账目 列表 并 
显示 。 

修改 消费 记录 是 单 击 了 某 行 账目 记录 之 后 触发 的 。 触 发 后 ,显示 账目 录入 DIV。 用 
户 修 改 数 据 后 , 单 击 “ 保 存 ” 按 钮 ,将 数据 更 新 到 HTML5 本 地 存储 中 ,重新 绑 定 账目 列表 
并 显示 。 

在 这 个 过 程 中 ,有 一 点 做 了 特殊 处 理 。 判 断 本 次 账目 记录 的 性 质 是 收入 还 是 支出 , 主 
要 根据 账目 事由 来 确定 。 选 中 的 账目 事由 在 1 一 99 ,表示 支出 ,将 表单 中 的 性 质 文本 改 为 
“支出 ”; 选中 的 账目 事由 在 101 一 199, 表 示 收 入 ,将 表单 中 的 性 质 文本 改 为 “收入 ”。 

具体 实现 代码 如 下 所 示 : 


// 返 回 按钮 处 理事 件 

function Return() { 
$ ('#divDetail'). hide(); 
$ ('#divList'). show(); 

} 


// 保 存 按钮 处 理事 件 

function Save() { 
var id = $('#txtId').val(); 
var title = $("#ddiTitle ").val(); 
var amount = $ ('#txtAmount').val(); 
var content = $('#txtContent').val(); 
Var direct = —1; 


if ($("#spanType").html() == ' 收 入 ') { 
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direct = 1; 
} 
varr = new record(id, title, content, amount, direct); 
if (id == "){ 
r. Bdd(); 
} else{ 
r. Update( ); 
} 
LoadList(); 
Return(); 


} 


// 新 增 按钮 处 理事 件 
function New() { 
$ ('#txtId'). val( ''); 
$ ("#ddlTitle ").get(0). selectedIndex = 1 $ ('#txtAmount').val('0'); 
$ ('#txtContent'). val(''); 
$ ("#spanType").html(' 支 出 '); 
$ ('#divDetail'). show(); 
$ ('#divList'). hide(); 


$ ('#btnDelete'). hide(); 
} 


// 事 由 下 拉 框 值 更 新 事件 
function ChangeTitle() { 
if (parseInt( $ ('#ddilTitle').val()) > 100) { 
$ (" 间 spanType").html(' 收 入 '); 
} else{ 
$("#spanType").html(' 支 出 '); 
} 


553 删除 消费 记录 


当 用 户 选中 某 行 账目 记录 后 ,在 修改 表单 中 的 “保存 ”按钮 右边 显示 “删除 ”按钮 , 单 击 
后 ,要 求 用 户 确认 是 否 要 删除 。 如 果 确 定 要 删除 , 则 从 HTML5 本 地 存储 中 删除 该 记录 ， 
重新 绑 定 账目 记录 并 显示 。 

在 这 个 过 程 中 ,有 一 点 比较 特殊 : 在 调用 record 对 象 的 Delete 方法 之 前 ,需要 调用 
其 构造 函数 (new 方法 ) ,其 中 只 有 第 一 个 参数 (id) 在 Delete 方法 中 会 用 到 ,因此 其 他 参数 
可 以 传递 一 些 无 效 数据 。 

具体 实现 代码 如 下 所 示 : 


function Delete() { 
证 (!confirm(' 是 否 要 删除 该 项 ?') ) return; 
var id = $('#txtId').val(); 
varr = new record(id, 0, 0, 0, 0); 
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r.Delete( ); 
LoadList(); 
Return(); 


} 
554 清空 消费 记录 


在 账目 列表 界面 有 个 “清空 "按钮 , 单 击 该 按钮 ,要求 用 户 确认 是 否 要 清空 。 如 果 确 定 
要 清空 , 则 从 HTML5 本 地 存储 中 清除 所 有 数据 。 
具体 实现 代码 如 下 所 示 : 
function Clear() { 
RemoveWebStorage( ); 
LoadList(); 
$ ('#divDetail'). hide(); 
$ ('#divList'). show(); 
} 


555 用 户 体验 改进 


在 测试 项 目的 过 程 中 ,会 发 现 有 很 多 不 完善 的 地 方 。 有 些 是 移动 终端 自身 的 问题 ,无 
法 避免 ,有 些 是 可 以 通过 一 些 手段 去 控制 的 。 这 里 列举 两 个 有 可 能 造成 用 户 操作 不 方便 
的 细节 。 

(1) 因为 屏幕 比较 小 ,每 次 用 户 点 击 某 行 时 ,不 能 确定 是 否 点 中 需要 编辑 的 那 一 行 ， 
系统 也 没有 提示 信息 便 直 接 显 示 修 改 界面 。 

为 了 解决 这 个 问题 ,利用 全 局 变量 curId。 每 次 用 户 点 击 某 一 行 时 , 先 获 取 当 前 行 的 
账目 编号 ,然后 将 其 与 curId 相 比较 。 如 果 两 者 不 一 致 , 则 将 当前 的 账目 编号 记录 到 
curId 中 ,并 将 当前 行 改变 背景 色 。 这 样 ,用 户 就 可 以 “选中 ” 某 一 行 。 再 次 点 击 该 行 ， 
curId 和 前 行 的 账目 编号 就 相等 了 ,这 时 就 可 以 显示 编辑 表单 。 简 言 之 ,就 是 将 原来 的 单 
击 一 次 就 触发 改 为 单 击 两 次 触发 。 

具体 实现 代码 如 下 所 示 : 

// 账 目 行 点 击 事件 

function MouseClickRow(tr, id) { 

if (curId == id) { 
Edit(id); 

} else{ 
$ ("tr.ListItem").css("background — color", ""); 
$ (tr).css("background — color", "#FFFF99"); 
curId = jd; 


} 


(2) 在 用 户 录入 账目 金额 时 .会 显示 输入 法 ,并 占据 部 分 屏幕 区 域 ,有 时 会 谈 住 下 方 
的 “保存 ”按钮 。 
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为 了 解决 这 个 问题 ,在 金额 文本 框 的 右边 放置 0 一 9 这 10 个 超 链 接 按 钮 ,让 用 户 通过 
单 击 这 些 按钮 达到 输入 的 目的 ,代替 输入 法 。 

具体 实现 代码 如 下 所 示 : 

@ HTML 代码 : 


<div class= "ListItem"> 
< span class = "FormLabel"> 
金额 : 
</span> 
< span class = "FormControl"> 
< input type = "text" id = "txtAmount" style= "width:15%" /> 
<a href = "javascript:ChangeAmount(0)" class = "AmountOperation"> 


gnbsp; 0gnbsp; 

</a> 

<a href = "javascript:ChangeAmount(1)" class = "AmountOperation"> 
Snbsp; 1&nbsp; 

</a> 

<a href = "javascript:ChangeAmount(2)" class = "AmountOperation"> 
Snbsp; 2g&nbsp; 

</a> 

<a href = "javascript:ChangeAmount(3)" class = "AmountOperation"> 
Snbsp; 3g&nbsp; 

</a> 

<a href = "javascript:ChangeAmount(4)" class = "AmountOperation"> 
Snbsp; 4gnbsp; 

</a> 

<a href = "javascript:ChangeAmount(5)" class = "AmountOperation"> 
Snbsp; 5&nbsp; 

</a> 

<a href = "javascript:ChangeAmount(6)" class = "AmountOperation"> 
Snbsp; 6g&nbsp; 

</a> 

<a href = "javascript:ChangeAmount(7)" class = "AmountOperation"> 
gnbsp; 7&nbsp; 

</a> 

<a href = "javascript:ChangeAmount(8)" class = "AmountOperation"> 
Snbsp; 8&nbsp; 

</a> 

<a href = "javascript:ChangeAmount (9)" class = "AmountOperation"> 
&nbsp;9&nbsp; 

</a> 

<a href = "javascript:Changehmount( - 1)" class = "AmountOperation"> 
Snbsp; C&nbsp; 

</a> 

</span> 
</div> 


@ JavaScript 代码 : 
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// 修 改 金额 方法 ,检测 0 开头 的 非法 数值 
function ChangeAmount (x) { 
if (x == —1){ 
$ ('#txtAmount'). val( ''); 
return; 
} 
var amount = new String( $ ('#txtAmount'). val()); 
amount += new String(x); 
while (amount. substring(0, 1) == '0') { 
amount = amount. substring(1); 


} 
$ ('#txtAmount'). val(amount); 


5.6 项 目 进 阶 


本 项 目 仅仅 对 个 人 记 账 软件 做 了 初步 设计 ,还 有 很 多 方面 值得 扩充 ,这 里 列举 两 点 。 
(1) 在 选择 收 支 事 项 时 ,下 拉 框 中 的 数据 是 从 一 个 数组 中 读 取 的 ,但 由 于 该 数组 是 固 
定 的 ,所 以 收 支 事项 这 个 字段 的 值 是 不 可 更 改 的 。 如 果 要 改进 成 可 变动 的 ,将 收 支 事项 这 


个 数据 设计 成 JSON 格式 并 从 远程 获取 。 
(2) 在 统计 数据 时 ,仅仅 按照 收入 还 是 支出 做 了 简单 的 汇总 。 如 果 要 改进 ,将 收 支 事 


项 .时 间 等 因素 考虑 进去 。 


5.7 课外 实践 


请 读者 根据 项 目 进 阶 中 的 两 点 提示 修改 、 完 善本 项 目 。 


知识 目标 : 

。 掌握 JavaScript 操作 HTML 的 方法 
。 掌握 JavaScript 计时 器 的 操作 方法 
能 力 目标 : 

。 能 使 用 jQuery 操作 本 地 存储 

。 能 使 用 jQuery 操作 JSON 格式 数据 


6.1 项 目 介绍 


打 地 鼠 是 一 款 老少 皆 宜 的 经 典 游戏 ,在 游戏 的 同时 还 能 锻炼 人 的 反应 能 力 。 游 戏 的 
规则 很 简单 : 在 游戏 界面 中 有 3 行 3 列 9 个 区 域 .每 隔 固 定时 间 , 这 9 个 区 域 中 的 1 个 会 
冒 出 1 个 地 鼠 , 只 要 在 限定 时 间 内 ,把 冒 出 来 的 地 鼠 给 打下 去 就 能 得 分 。 

本 项 目的 实现 分 为 3 部 分 : 四 网 站 规划 与 设计 ; 四 设计 用 户 界面 ; 四 系统 编码 


整体 效果 如 图 6-1 所 示 。 
国 4: 。 和 和 am, > 


| 得 分 : 2 剩余 时 间 : 10s 


图 6-1 打 地 鼠 游 戏 整体 效果 图 
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6.2 系统 功能 分 析 


打 地 和 鼠 游 戏 相对 比较 简单 ,主要 分 为 创建 地 鼠 和 项 击 响应 两 个 功能 模块 。 
(1) 创建 地 鼠 : 在 地 图 上 的 9 个 位 置 随机 创建 1 个 地 鼠 并 显示 。 

(2) 项 击 响应 : 当 痪 中 某 个 地 鼠 后 ,地 鼠 消失 并 计 分 。 

系统 流程 如 图 6-2 所 示 。 


系统 初始 化 


游戏 开始 


[一 一 一 | 随机 创建 地 鼠 


打 中 地 鼠 


未 超时 未 打 中 地 鼠 


是 否 超时 


束 已 到 达 地 鼠 
| 自动 消失 时 间 


地 鼠 消 失 FR 一 一 一 计 分 


旦 而 
是 否 


se 


吉 束 游戏 


单 击 “ 结 束 "按钮 


图 6-2 系统 流程 图 


6.3 设计 用 户 界 面 


631 网 页 布局 


打 地 鼠 游 戏 的 网 页 主体 是 一 个 3X3 的 表格 .可 以 简单 地 使 用 HTML 中 的 table 元 
素 作为 地 图 的 布局 。 在 表格 上 方 放置 一 个 div 容器 ,里 面 有 “开始 ”按钮 “结束 ”按钮 以 及 
分 数 标签 。 

为 了 让 地 图 有 直观 的 感觉 ,需要 将 表格 中 每 个 单元 格 的 背景 设置 为 一 个 草地 图 片 , 具 


体 网 页 布局 设计 如 图 6-3 所 示 。 


开始 按钮 


结束 按钮 


计 分 标签 div 容 器 


单元 格 01 
草地 背景 


单元 格 02 
草地 背景 


单元 格 03 
草地 背景 


单元 格 04 
草地 背景 


单元 格 05 
草地 背景 


单元 格 06 地 图 表格 
四 单元 格 间距 为 0 
草地 背景 


单元 格 07 
草地 背景 


单元 格 08 
草地 背景 


单元 格 09 
草地 背景 


图 6-3 


网 页 布局 图 


在 实际 设计 时 ,每 个 单元 格 的 背景 图 片 都 是 一 样 的 ,所 以 单独 定义 一 个 CSS 样式 bg， 
用 于 设置 背景 图 片 。 为 了 后 期 访问 方便 ,在 每 个 单元 格 中 放置 一 个 命名 的 DIV ,名字 为 
ml 一 m9, 并 将 bg 样式 应 用 到 这 9 个 div 中 。 后 期 还 需要 在 每 个 div 中 添加 图 片 ,用 于 显 


示 地 鼠 。 


对 于 表格 地 图 上 方 的 操作 区 ,也 需要 命名 ,并 设置 样式 。 考 虑 到 移动 平台 的 字体 比较 
小 ,需要 将 操作 区 的 字体 放大 到 24px。 操 作 区 里 面 放置 4 个 元 素 ,除了 设计 图 中 的 3 个 
已 知 元 素 外 ,还 增加 了 一 个 用 于 调试 的 标签 ,显示 当前 是 哪个 单元 格 中 有 地 鼠 出 现 。 

具体 的 布局 网 页 代码 如 下 所 示 : 


(1) CSS 内 容 : 


.bg { 


background — image: url("th. jpg") 


} 
(2) HTML 元 素 : 


<div id= "oper" style = "height:30px;font — size:24px;"> 


<a> 
开始 

</a> 

<a> 
结束 

</a> 

< span id = "msg"> 

</span> 

< span id= "score"> 

</span> 

</div> 


<table cellpadding = "0" cellspacing = "0"> 


<tr> 
<td> 
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<div class= "bg" id= "ml"> 
</div> 
</td> 
<td> 
<div class= "bg" id= "m2"> 
</div> 
</td> 
<td> 
<div class= "bg" id= "m3"> 
</div> 
</td> 
</tr> 
<tr> 
<td> 
<div class= "bg" id= "m4"> 
</div> 
</td> 
<td> 
<div class= "bg" id= "m5"> 
</div> 
</td> 
<td> 
<div class = "bg" id= "m6"> 
</div> 
</td> 
</tr> 
<tr> 
<td> 
<div class = "bg" id= "m7"> 
</div> 
</td> 
<td> 
<div class = "bg" id = "m8"> 
</div> 
</td> 
<td> 
<div class = "bg" id= "m9"> 
</div> 
</td> 
</tr> 
</table> 


632 地 鼠 图 片 引 入 


在 游戏 运行 过 程 中 ,虽然 同一 时 刻 只 会 出 现 1 个 地 鼠 , 但 是 在 设计 阶段 ,需要 将 9 个 
地 鼠 预先 准备 .隐藏 好 ,然后 根据 随机 数 将 指定 的 地 鼠 显 示 出 来 。 

安置 地 鼠 很 简单 ,只 要 在 每 个 单元 格 的 DIV 容器 中 增加 IMG 元 素 就 可 以 了 ,命名 为 
mousel 一 mouse9。 需 要 注意 的 是 ,默认 情况 下 ,这 些 IMG 元 素 是 隐藏 的 。 要 隐藏 一 个 
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IMG 元 素 ,首先 想 到 使 用 CSS 样式 ,也 可 以 将 IMG 元 素 的 width 和 height 属性 设置 为 
0, 同 样 达到 所 需 效果 。 
具体 代码 如 下 所 示 : 


<td> 
<div class = "bg" id = "ml"> 
< img id= "mousel" src= "mouse.png" width= "0" height = "0" /> 
</div> 
</td> 


6.4 系统 编码 实现 


641 初始 化 处 理 


一 般 情况 下 ,网 页 的 初始 化 主要 工作 是 定义 全 局 变量 ,并 设置 各 个 元 素 的 初始 状态 。 

在 引用 jQuery 框架 后 ,初始 化 工作 主要 在 document. ready 的 事件 处 理 函 数 中 完成 ， 
简写 为 $ (function(){…)); 这 种 形式 。 

在 打 地 鼠 游 戏 中 ,具体 的 初始 化 工作 有 如 下 几 个: 

(1) 定义 用 于 存储 地 鼠标 志 的 全 局 一 维 数组 data。 

(2) 定义 用 于 记录 分 数 的 全 局 变量 score。 

(3) 定义 document. ready 的 事件 处 理 函 数 。 

(4) 初始 化 data 数组 对 象 中 的 每 个 元 素 为 0。 

(5) 初始 化 每 个 IMG 对 象 (地 鼠 图 片 ) 的 尺寸 ,并 隐藏 。 

(6) 初始 化 每 个 DIV 对 象 (地 图 单元 格 容 器 ) 的 尺寸 。 

实现 代码 如 下 所 示 : 


var data = new Array(); 
var t; // 计 时 器 对 象 ,具体 使 用 见 start 函数 
var Score = 0; 
$ (function() { 
var h = $ (document).height() - 60; // 获 取 可 操作 区 高 度 
var w = $ (document).width(); // 获 取 可 操作 区 宽度 
varx = h; 
if (h>w) x = w; 
x = parseInt(x / 3); //x 为 每 个 单元 格 的 width 和 height 
for (var i = 1; i<= 9; i++){ 
var img = $("#mouse" + i.toString()); 
img. height (x); 
img. width(x); 
img. hide( ); 
var div = $("#m" + i.toString()); 
div. height (x); 
div. width(x); 
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642 显示 和 隐藏 地 和 鼠 函 数 


(1) 显示 地 鼠 函 数 : ShowMouse, 参 数 为 地 鼠 的 位 置 (1 一 9) 。 
实现 代码 如 下 所 示 : 


function ShowMouse(i) {; 
data[i] = 1; 
var img = $("#mouse" + i.toString()); 
img. show( ); 
} 
(2) 隐藏 地 鼠 函 数 : HideMouse, 参 数 为 地 鼠 的 位 置 (1 一 9) 。 
实现 代码 如 下 所 示 ， 
function HideMouse(i) { 
data[i] = 0; 
var img = $("#mouse" + i.toString()); 
img. hide( ); 
} 


643 敲 击 函 数 


敲 击 函数 Hit, 参数 为 地 鼠 的 位 置 (1~~9)。 首 先 判 断 对 应 的 位 置 是 否 有 地 鼠 , 即 判 
断 data[ i 是 否 为 1。 如 果 为 1, 将 对 应 位 置 的 地 鼠 隐 藏 ,并 记录 分 数 。 
实现 代码 如 下 所 示 : 
function hit(i) { 
shake("#divShake", 10); 
if (data[i] == 1){ 
scoret+; 
$ ("# score").html(" 得 分 : "+ score.toString() + "分 "); 
HideMouse(i); 


} 


644 开始 按钮 处 理事 件 


开始 函数 : start。 具 体 的 操作 步骤 如 下 。 

(1) 生成 1 一 9 的 随机 数 作为 显示 地 鼠 的 位 置 。 
(2) 显示 当前 的 随机 位 置 ,用 于 调试 。 

(3) 根据 当前 的 随机 位 置 ,显示 地 鼠 。 

(4) 1 秒 钟 后 ,隐藏 地 鼠 。 

(5) 2 秒 钟 后 ,使 用 定时 器 递归 调用 start 函数 。 
实现 代码 如 下 所 示 : 


function start() { 


(OR [项 目 6 综合 项 -Ri ] 193 


var index = Math.floor(Math.random() * 9) + 1; 

$ ("#msg").html("index:" + index.toString()); 
ShowMouse( index); 

setTimeout("HideMouse(" + index.toString() + ")", 1000); 
t = setTimeout("start()", 2000); 


645 ”结束 按钮 处 理事 件 


结束 函数 : end。 具 体 的 工作 有 以 下 两 个 。 
(1) 清除 定时 器 t, 终 止 start 函数 中 的 递归 。 
(2) 将 计 分 清 零 。 
实现 代码 如 下 所 示 : 
function end() { 

clearTimeout(t); 


score = 0; 


} 


646 震动 效果 函数 


震动 函数 : shake, 参 数 有 两 个 。 一 个 是 弹簧 div 的 元 素 对 象 obj, 另 一 个 是 震动 的 幅 
度 count( 单 位 是 像素 )。 具 体 的 工作 有 如 下 几 步 。 

(1) 判断 震动 幅度 是 否 小 于 等 于 0。 当 小 于 等 于 0 时 ,函数 返回 。 

(2) 震动 幅度 自 减 1 。 

(3) 获取 弹簧 div 元 素 的 高 度 。 

(4) 判断 弹簧 div 元 素 的 高 度 是 否 为 0。 如 果 为 0, 设 置 其 高 度 为 震动 幅度 ; 如 果 不 
为 0, 设置 其 高 度 为 0。 

(5) 使 用 当前 的 震动 幅度 ,使 用 定时 器 递归 调用 震动 函数 。 

实现 代码 如 下 所 示 


function shake(obj，count) { 
if (count <= 0) return; 
varh = $ (obj). height(); 
count = count — 1; 
证 (h == 0) $ (obj).height(count); 
else $ (obj).height(0); 


setTimeout("shake('" + obj + "'," + count.toString() + ")", 30); 


} 


647 绑 定 事件 处 理 函 数 


定义 好 各 个 函数 后 ,需要 在 HTML 元 素 的 事件 中 调用 这 些 函 数 , 绑 定 操作 如 下 
所 述 。 
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(1) 开始 按钮 单 击 事件 : start 函数 。 


<a href = "javascript:void(0)" onclick=" 


开始 


</a> 


(2) 结束 按钮 单 击 事件 : end 函数 。 


<a href = "javascript:void(0)" onclick=" 


结束 
</a> 


start();"> 


end();"> 


(3) 地 图 表格 单元 格 容器 单 击 事件 : hit 函数 。 


<td> 


<div class = "bg" id= "ml" onclick = "hit(1)"> 
< img id = "mousel" src= "mouse. png" width= "0" height = "0" /> 


</div> 
</td> 


648 最 终 实现 代码 
JS 代码 如 下 所 示 : 


var data = new Array(); 
var t; 
var score = 0; 


$ (function() { 
for (var i = 1; i<= 9; i++)1{ 
data[i] = 0; 
} 
varh 


varw $ (document). width(); 


varx h; 
if (h>w) x 


Ws 


x = parseInt(x / 3); 


for (var i = 1; i<= 9; i++){ 


$ (document). height() - 60; 


var img = $("#mouse" + i.toString()); 


img. height (x); 
img. width(x); 
img. hide( ); 


var div 
div. height (x); 
div. width(x); 


}); 


$("#m" + i.toString()); 
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function ShowMouse(i) {; 


data[i] = 1; 
var img = $("#mouse " + i.toString()); 
img. show( ); 


} 
function HideMouse(i) { 
data[i] = 0; 
var img = $ ("#mouse" + i.toString()); 
img. hide( ); 
} 
function shake(obj, count) { 
if (count <= 0) return; 
var h = $ (obj).height(); 
count = count — 1; 
if (h == 0) $ (obj). height(count); 
else $ (obj). height(0); 


setTimeout("shake('" + obj + "', " + count.toString() + ")", 30); 


function hit(i) { 
shake("#divShake ", 10); 
if (data[i] == 1){ 
scoret+; 
$ ("#score ").html(" 得 分 : ”+ score.toString() + "分 "); 
HideMouse( i); 


function start() { 
var index = Math.floor(Math.random() * 9) + 1; 
$ ("#msg ").html("index: " + index.toString()); 
ShowMouse( index); 
setTimeout("HideMouse(”+ index. toString() +")",1000); //1 秒 后 地 鼠 消 失 
t = setTinmeout("start()"，2000); // 每 2 秒 出 现 一 个 地 鼠 
} 
function end() { 
clearTimeout(t); 
score = 0; 


} 
HTML 代码 如 下 所 示 : 


< div id = "oper" style = "height:60px:1line- height:60px;font — size:1.2em;"> 
<a href = "javascript:void(0)”onclick = "start(); "> 
开始 
</a> 
<a href = "javascript:void(0)”onclick= "end(); "> 
结束 
</a> 
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<span id= "msg"> 
</span> 
< span id = "score"> 
</span> 
</div> 
<div id= "divShake" style= "height:0px"> 
</div> 
< table cellpadding = "0" cellspacing = "0"> 
EE 
<td> 
<div class= "bg" id= "ml" onclick = "hit(1)"> 
< img id= "mousel" src = "mouse.png" width = "0" height = "0" /> 
</div> 
</td> 
<td> 
<div class = "bg" id= "m2" onclick = "hit(2)"> 
< img id= "mouse2" src = "mouse. png" width = "0" height = "0" /> 


</div> 
</td> 
<td> 
< div class= "bg" id= "m3" onclick = "hit(3)"> 
< img id= "mouse3" src = "mouse.png" width = "0" height = "0" /> 
</div> 
</td> 
</tr> 
<tr> 
<td> 
<div class= "bg" id= "m4" onclick = "hit(4)"> 
< img id= "mouse4"” src = "mouse. png" width = "0" height = "0" /> 
</div> 
</td> 
<td> 
<div class="bg" id= "m5" onclick = "hit(5)"> 
< img id= "mouse5" src = "mouse. png" width = "0" height = "0" /> 
</div> 
</td> 
<td> 
<div class= "bg" id= "m6" onclick = "hit(6)"> 
< img id= "mouse6" src = "mouse.Ppng" width = "0" height = "0" /> 
</div> 
</td> 
</tr> 
<tr> 
<td> 
<div class = "bg" id = "m7" onclick = "hit(7)"> 
< img id= "mouse7" src = "mouse. png" width = "0" height = "0" /> 
</div> 
</td> 


<td> 
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<div class= "bg" id= "m8" onclick = "hit(8)"> 
< img id= "mouse8" src = "mouse.png" width = "0" height = "0" /> 
</div> 
</td> 
<td> 
<div class = "bg" id= "m9" onclick = "hit(9)"> 
< img id= "mouse9" src = "mouse. png" width = "0" height = "0" /> 


</div> 
</td> 
</tr> 
</table> 
6.5 项 目 进 阶 
目前 , 打 地 鼠 游 戏 仅仅 实现 了 敲 击 和 计 分 功能 ,可 扩展 性 很 强 。 可 以 在 以 下 几 个 方面 


扩充 。 

(1) 游戏 自动 结束 : 当前 是 通过 一 个 按钮 结束 游戏 。 以 漏 掉 的 地 鼠 个 数 为 依据 , 增 
加 游戏 自动 结束 功能 。 例 如 , 当 漏 掉 的 地 鼠 满 10 个 时 ,游戏 自动 结束 ; 以 时 间 为 结束 依 
据 ,例如 游戏 每 次 持续 1 分 钟 ,时 间 到 ,游戏 自动 结束 。 当 然 , 也 可 以 将 前 面 两 个 依据 结合 
起 来 ,作为 游戏 结束 条 件 。 

(2) 难度 等 级 划分 : 等 级 越 高 ,地 鼠 出 现 的 频率 越 快 ,对 用 户 的 反应 要 求 越 高 。 游 戏 
中 有 很 多 地 方 用 到 了 定时 器 ,除了 震动 效果 以 外 ,其 他 定时 器 都 可 以 作为 控制 频率 的 手 
段 。 在 控制 频率 时 ,需要 大 量 测 试 ,防止 难度 太 高 而 失去 游戏 乐趣 。 

(3) 多 地 鼠 敲 击 : 同时 出 现 多 个 地 和 鼠 , 用 户 可 以 快速 地 依次 斋 击 ,也 可 以 在 支持 多 点 
触 屏 的 设备 上 同时 敲 击 多 个 地 和 鼠 。 要 实现 这 样 的 功能 ,需要 定义 多 个 定时 器 对 象 ,每 个 定 
时 器 对 象 虽然 共享 同一 个 数据 存储 ,但 需要 独立 处 理 用 户 的 操作 。 

(4) 得 分 排行 榜 : 每 次 游戏 结束 后 ,记录 本 次 游戏 的 得 分 ,然后 显示 历史 排名 。 虽 然 
这 个 功能 看 似 简单 ,但 是 有 很 多 要 考虑 的 地 方 , 其 关键 是 该 历史 排名 的 存储 位 置 : 全 局 变 
量 , 本 地 文件 .远程 服务 器 。 对 于 不 同 的 存储 位 置 , 有 不 同 的 存储 方案 。 


6.6 课外 实践 


请 读者 根据 项 目 进 阶 的 提示 ,修改 、 完 善本 项 目 。 
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